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

Question

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

这不是任何更大的项目的一部分，我只是把它当作一个思想实验。我在这里创建了一个工作演示：https://jsfiddle.net/gu4ur6us/

这可以按照预期的方式工作，并根据勾选的复选框数量显示even或odd。问题是，有160 :checked和:not(:checked)选择器为5个复选框！有更好的办法吗？

Answer 1

大多数前端工程师都会编写一个JavaScript例程，以便每次更改复选框时运行，计数所有选中的输入，并根据计数更改span内容。

但是，如果这不是一个选项，下面是您的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>

如果希望将其限制在特定的情况下，只需将它们包装在父选择器中，并在父选择器中加上一个短的、特定的、类和前缀的父选择器+一个空格。

另外，如果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会看我是否能找到一个更好的解决方案。