为什么其他检查的无线电输入和标签不起作用？

问题描述

This使我的问题更加清楚。

我有两个完全相同的html-A和B。他们共享相同的CSS，为什么A正常工作而B无效？
我该如何逆转心脏检查？要使选中的心从左到右。

我尝试过flexBox，但是很难为输入和标签创建容器。输入和标签似乎密不可分怎么办？

我还尝试过使用属性input：nth-of-type（5）更改订单。

html：

<div class="game">
  <h1>A</h1>
    <div class="b">
      <div class="streaming-info">
        <input type="radio" id="h1" name="heart" value="heart">
        <input type="radio" id="h2" name="heart" value="heart">
        <input type="radio" id="h3" name="heart" value="heart">
        <input type="radio" id="h4" name="heart" value="heart">
        <input type="radio" id="h5" name="heart" value="heart">
        
        <label for="h1" class="viewers"><i class="fas fa-heart"></i></label>
        <label for="h2" class="viewers"><i class="fas fa-heart"></i></label>
        <label for="h3" class="viewers"><i class="fas fa-heart"></i></label>
        <label for="h4" class="viewers"><i class="fas fa-heart"></i></label>
        <label for="h5" class="viewers"><i class="fas fa-heart"></i></label>
      </div>
      <div class="btnDiv">
        <button class="btn"><a href="#">Reviews</a></button>
        <button class="btn"><a href="#">Buy</a></button>
      </div>

    </div> 
  </div>

<div class="game">
  <h1>B</h1>
    <div class="b">
      <div class="streaming-info">
        <input type="radio" id="h1" name="heart" value="heart">
        <input type="radio" id="h2" name="heart" value="heart">
        <input type="radio" id="h3" name="heart" value="heart">
        <input type="radio" id="h4" name="heart" value="heart">
        <input type="radio" id="h5" name="heart" value="heart">
        
        <label for="h1" class="viewers"><i class="fas fa-heart"></i></label>
        <label for="h2" class="viewers"><i class="fas fa-heart"></i></label>
        <label for="h3" class="viewers"><i class="fas fa-heart"></i></label>
        <label for="h4" class="viewers"><i class="fas fa-heart"></i></label>
        <label for="h5" class="viewers"><i class="fas fa-heart"></i></label>
      </div>
      <div class="btnDiv">
        <button class="btn"><a href="#">Reviews</a></button>
        <button class="btn"><a href="#">Buy</a></button>
      </div>

    </div> 
  </div>

SCSS：

.stats{
  display: flex;
}
.streaming-info >input{
  // order: 1; 
  position: absolute;
  top:0;
  right:0;
  opacity: 0;
  z-index: -999;
}
label:nth-of-type(5){
  order: 2;
}
label:nth-of-type(4){
  order:3;
}
label:nth-of-type(3){
  order:4;
}
label:nth-of-type(2){
  order:5;
}
label:nth-of-type(1){
  order:6;
}

input:nth-of-type(1):hover  ~label:nth-of-type(1),input:nth-of-type(2):hover  ~label:nth-of-type(2),input:nth-of-type(3):hover  ~label:nth-of-type(3),input:nth-of-type(4):hover  ~label:nth-of-type(4),input:nth-of-type(5):hover  ~label:nth-of-type(5){
  color: red;
}
input:nth-of-type(5):checked  ~label:nth-of-type(n+5),input:nth-of-type(4):checked  ~label:nth-of-type(n+4),input:nth-of-type(3):checked  ~label:nth-of-type(n+3),input:nth-of-type(2):checked  ~label:nth-of-type(n+2),input:nth-of-type(1):checked  ~label:nth-of-type(n+1){
  color: red;
}

解决方法

您必须将所有输入都包装在form标记内。然后相应地更新CSS。

尝试一下，

<!DOCTYPE html>
<html lang="en">

<head>

</head>

<body>
  <div class="game">
    <h1>A</h1>
    <div class="b">
      <div class="streaming-info">
        <form>
          <input type="radio" id="h1" name="heart" value="heart">
          <input type="radio" id="h3" name="heart" value="heart">
          <input type="radio" id="h4" name="heart" value="heart">
          <input type="radio" id="h5" name="heart" value="heart">
          <input type="radio" id="h6" name="heart" value="heart">

          <label for="h1" class="viewers"><i class="fas fa-heart"></i></label>
          <label for="h2" class="viewers"><i class="fas fa-heart"></i></label>
          <label for="h3" class="viewers"><i class="fas fa-heart"></i></label>
          <label for="h4" class="viewers"><i class="fas fa-heart"></i></label>
          <label for="h5" class="viewers"><i class="fas fa-heart"></i></label>
        </form>
      </div>
      <div class="btnDiv">
        <button class="btn"><a href="#">Reviews</a></button>
        <button class="btn"><a href="#">Buy</a></button>
      </div>

    </div>
  </div>

  <div class="game">
    <h1>B</h1>
    <div class="b">
      <div class="streaming-info">
        <form>
          <input type="radio" id="h2" name="heart" value="heart">
          <input type="radio" id="h2" name="heart" value="heart">
          <input type="radio" id="h2" name="heart" value="heart">
          <input type="radio" id="h2" name="heart" value="heart">
          <input type="radio" id="h2" name="heart" value="heart">

          <label for="h1" class="viewers"><i class="fas fa-heart"></i></label>
          <label for="h2" class="viewers"><i class="fas fa-heart"></i></label>
          <label for="h3" class="viewers"><i class="fas fa-heart"></i></label>
          <label for="h4" class="viewers"><i class="fas fa-heart"></i></label>
          <label for="h5" class="viewers"><i class="fas fa-heart"></i></label>
        </form>
      </div>
      <div class="btnDiv">
        <button class="btn"><a href="#">Reviews</a></button>
        <button class="btn"><a href="#">Buy</a></button>
      </div>

    </div>
  </div>
</body>

</html>

希望这对您有所帮助：）

您是否尝试过为两个html添加相同的类名？

checked html input input label label label label

为什么其他检查的无线电输入和标签不起作用？

问题描述

解决方法

相关问答