Question

当检查标记的总数是偶数或奇数时，我试图在几个<input type="checkbox">上创建条件CSS样式。

这不是任何大型项目的一部分;我一直认为这是一个思想实验。我在这里创建了一个工作演示：https://jsfiddle.net/gu4ur6us/

这可以按预期工作，并显示even或odd，具体取决于勾选了多少个复选框。问题是 5 复选框有 160 :checked和:not(:checked)选择器！还有更好的方法吗？

Answer 1

大多数前端工程师会在每次更改复选框时编写一个JavaScript例程来运行，计算所有已检查的输入并根据计数更改跨度内容。

但是，如果这不是一个选项，那么这是一个较短的CSS形式：

span:after, 
:checked~:checked~span:after, 
:checked~:checked~:checked~:checked~span:after {
  content: 'even';
}

:checked~span:after,
:checked~:checked~:checked~span:after, 
:checked~:checked~:checked~:checked~:checked~span:after {
  content: 'odd';
}

<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">

<span></span>

如果你想将它限制在一个特定的情况下，只需将它们包装在一个带有short，specific，class的父级中，并为每个选择器添加前缀选择器+空格。

另外，如果JavaScript不是一个选项，你可以查看SCSS来编写一个函数，它会占用一些有用的参数（即：复选框的数量，父）并输出所有必要的CSS（上面的代码将是输入5个复选框）。

我试了一下手。可能会简化，但这是一个粗略的版本：

https://jsfiddle.net/websiter/g0dpgvfp/

// =============================================== variables. change as needed.
$times: 21;
$selector: ':checked~';
$prefix:'';     // parent selector (prefix), if needed
$sufix: 'span:after';

// =============================================== functions.
@function make-selector($times, $selector, $prefix, $sufix) {
  $output: '';
  @for $i from 1 through $times {
      $output:#{$output}#{$selector};
  }
  @return #{$prefix}#{$output}#{$sufix}
}
@function two-by-two($times, $selector, $prefix, $sufix, $even) {
  $output: '';
  $i: 0;
  @while $i*2 < $times*2 - 1 {
    $output:#{$output}#{make-selector($i+$even, $selector, $prefix, $sufix)};
    @if $i*2 < $times*2 - 3 {
      $output:#{$output}#{','};
    }
    $i:$i+2;
  }
  @return $output;
}

// =============================================== output.
#{$prefix}#{$sufix},
#{two-by-two($times,$selector,$prefix,$sufix,0)} {
  content: 'even';
}
#{two-by-two($times,$selector,$prefix,$sufix,1)} {
  content: 'odd';
}

JavaScript版本或多或少是一个单行，并且需要花费2分钟来开发。而且，如果你问我，它会更优雅。

我上面写的内容可能给新生留下深刻印象，但与js版本相比，这是一个巨大的开发时间损失（除非有特殊要求不使用JavaScript - 所有人，包括政府，银行，支付门户，包容今天）。另外，请注意上面的标记结构缺乏灵活性（所有复选框都需要兄弟），而使用JavaScript，我们可以轻松计算整个页面的复选框，正如人们在真实场景中所期望的那样。

Answer 2

猜猜我们正在讨论一个纯粹的CSS挑战，只是为了lols（因为使用javascript和切换类计算将是我们为实际项目选择的），所以我们在这里...

稍微减少过载（但仍然是非常具体的方法）将是越来越多的重复css兄弟选择器，最多复选框的最大数量。

类似

input[type="checkbox"]:checked ~ span{ background:red }

input[type="checkbox"]:checked ~ input[type="checkbox"]:checked ~ span{ background:green }

input[type="checkbox"]:checked ~ input[type="checkbox"]:checked ~ input[type="checkbox"]:checked ~ span{ background:red }

等等。

https://jsfiddle.net/gu4ur6us/23/

还有一个不错的方法：p会看看我能否找到更好的解决方案

条件CSS样式取决于偶数/奇数复选框刻度

2 个答案: