Question

我正在使用CSS和SASS进行测试，并具有一系列重复选择并嵌套多次的选择器，我想简化代码，但不知道该怎么做（应该可以，但我不知道）。

主要思想是我有很多单选按钮（84个，在42个相同名称的2组中），并希望根据所检查的单选按钮的数量是奇数还是偶数为元素添加样式。

为此，现在我在SASS中使用&来生成当前选择器，并将其与同级选择器~嵌套在一起（顺序并不重要，只是选中的无线电的数量）。这是SASS代码的简化版本（只有10组）：

.rd:checked {
  & ~ &,
  & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & {
    ~ #oddeven {
      background: red; // red if even
    }
  }
  &,
  & ~ & ~ &,
  & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ &,
  & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & ~ & {
    ~ #oddeven {
      background: green; // green if odd 
    }
  }
}

这会生成以下CSS代码（我添加了HTML，以便可见所需的效果）：

.rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: red;
}

.rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven,
.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: green;
}

#oddeven {
  color: white;
  background: red;
  padding: 1em;
  position: absolute;
  top: 50px;
  right: 0;
  left: 100px;
}

<input type="radio" class="rd" name="rd0" />
<input type="radio" class="rd" name="rd0" /><br/>
<input type="radio" class="rd" name="rd1" />
<input type="radio" class="rd" name="rd1" /><br/>
<input type="radio" class="rd" name="rd2" />
<input type="radio" class="rd" name="rd2" /><br/>
<input type="radio" class="rd" name="rd3" />
<input type="radio" class="rd" name="rd3" /><br/>
<input type="radio" class="rd" name="rd4" />
<input type="radio" class="rd" name="rd4" /><br/>
<input type="radio" class="rd" name="rd5" />
<input type="radio" class="rd" name="rd5" /><br/>
<input type="radio" class="rd" name="rd6" />
<input type="radio" class="rd" name="rd6" /><br/>
<input type="radio" class="rd" name="rd7" />
<input type="radio" class="rd" name="rd7" /><br/>
<input type="radio" class="rd" name="rd8" />
<input type="radio" class="rd" name="rd8" /><br/>
<input type="radio" class="rd" name="rd9" />
<input type="radio" class="rd" name="rd9" />

<div id="oddeven">
  RED background if even number of checked radios (or nothing).<br/>
  GREEN background if odd number of checked radios.
</div>

有没有一种方法可以减少/简化SASS代码，使其更简洁？现在的方式很容易出错，添加新规则（对于新的单选按钮集）也很复杂。

或者，是否有可能以更好的方式做到这一点？（也许使用mixin或实际上以某种方式嵌套）。我没有使用&和~，而是尝试使用CSS计数器，但是我没有找到根据计数器的值添加样式的方法。

注意：我不想使用JavaScript ，只是不想使用HTML和CSS / SASS来生成规则。

Answer 1

您可以使用for loop，string interpolation和串联来生成这些public function getToken($phone,$isServerToken) { $stmt = $this->conn->prepare("SELECT phone, token, isServerToken FROM `token` WHERE phone=? AND isServerToken=?") or die ($this->conn->error); $stmt->bind_param("ss",$phone,$isServerToken); $result = $stmt->execute(); $stmt->bind_result($arr['phone'], $arr['token'], $arr['isServerToken']); $token = array(); // <- added this line, to be sure variable $token always exists while ($stmt->fetch()) { $token[] = array_map('urlencode', $arr ); // <- urlencode all values within $arr } $stmt->close(); return $token; }选择器：

& ~ & ...

我知道它不会产生与您完全相同的CSS，但是还可以实现更多的玩法。

工作演示：

// function to repeat string:
@function r($string, $times) { 
  $result: "";
  @if $times >= 1 {
    @for $i from 1 through $times {
      $result: $result + $string;
    }
  }
  @return $result;
}

// generate rules:
@for $n from 1 through 10 {
  .rd:checked {
    $s: r(' ~ &', $n - 1);
    $s: '&' + $s;
    @if ($n % 2 == 0) {
      #{$s} ~ #oddeven {
        background: red;
      }
    } @elseif ($n % 2 == 1) {
      #{$s} ~ #oddeven {
        background: green;
      }
    }
  }
}

#oddeven {
  color: white;
  background: red;
  padding: 1em;
  position: absolute;
  top: 50px;
  right: 0;
  left: 100px;
}

.rd:checked ~ #oddeven {
  background: green;
}

.rd:checked ~ .rd:checked ~ #oddeven {
  background: red;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: green;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: red;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: green;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: red;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: green;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: red;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: green;
}

.rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ .rd:checked ~ #oddeven {
  background: red;
}

#oddeven {
  color: white;
  background: red;
  padding: 1em;
  position: absolute;
  top: 50px;
  right: 0;
  left: 100px;
}

Answer 2

如果没有手动操作，目前在CSS中是不可能的。

但是，当CSS4选择器可用时，您可以同时使用:nth-child()和:last-child。

.rd:last-of-type:nth-child(even of :checked) ~ #oddeven {
  background: red;
}
.rd:last-of-type:nth-child(odd of :checked) ~ #oddeven {
  background: green;
}

#oddeven {
  color: white;
  background: red;
  padding: 1em;
  position: absolute;
  top: 50px;
  right: 0;
  left: 100px;
}

<input type="radio" class="rd" name="rd0" />
<input type="radio" class="rd" name="rd0" /><br/>
<input type="radio" class="rd" name="rd1" />
<input type="radio" class="rd" name="rd1" /><br/>
<input type="radio" class="rd" name="rd2" />
<input type="radio" class="rd" name="rd2" /><br/>
<input type="radio" class="rd" name="rd3" />
<input type="radio" class="rd" name="rd3" /><br/>
<input type="radio" class="rd" name="rd4" />
<input type="radio" class="rd" name="rd4" /><br/>
<input type="radio" class="rd" name="rd5" />
<input type="radio" class="rd" name="rd5" /><br/>
<input type="radio" class="rd" name="rd6" />
<input type="radio" class="rd" name="rd6" /><br/>
<input type="radio" class="rd" name="rd7" />
<input type="radio" class="rd" name="rd7" /><br/>
<input type="radio" class="rd" name="rd8" />
<input type="radio" class="rd" name="rd8" /><br/>
<input type="radio" class="rd" name="rd9" />
<input type="radio" class="rd" name="rd9" />

<div id="oddeven">
  RED background if even number of checked radios (or nothing).<br/>
  GREEN background if odd number of checked radios.
</div>

样式不同，取决于复选框的数量是奇数还是偶数

2 个答案: