CSS:不是选择器混淆行为

时间:2017-01-25 12:09:00

标签: html css css-selectors rating rating-system

这是参考此代码集https://codepen.io/jamesbarnett/pen/vlpkh?editors=1100

我正在寻找一些纯CSS星级评分系统。我对声明感到很困惑 .rating:not(:checked) > label:hover

有人能解释我怎么可能? .rating是一个fieldset元素。我们怎样才能将:not(:checked)选择器应用于它。它永远不会被检查。如果这是.rating input:not(:checked),那对我来说是有意义的。

它是否以某种方式选择其中的输入。因为我无法找到任何支持CSS :not选择器的行为的文档。

我无法理解它是如何工作的。

1 个答案:

答案 0 :(得分:2)

由于具有等级'等级的元素不是:checked伪类永远不会匹配的可检查输入元素。

相反,not(:checked) 始终 匹配(demo) - 使其功能冗余(除了增加的特异性),因此可以安全被省略

请注意,您可以从该选择器中删除伪类,并且演示仍然可以正常工作 (updated codepen)。