html - CSS :not selector confusing behavior

标签 html css css-selectors rating rating-system

这是引用这里的codepen https://codepen.io/jamesbarnett/pen/vlpkh?editors=1100

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

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

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

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

最佳答案

由于类为“rating”的元素不是可检查的输入元素,:checked 伪类永远不会匹配。

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

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

关于html - CSS :not selector confusing behavior,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41851301/

相关文章:

css - 如何使用 CSS 为具有特定于另一个标签内容的标签设置样式?

html - Google Drive/Dropbox API/RemoteStorage 应用程序的目录沙盒访问?

html - 如何改变jqxtree的字体大小

jquery - bootstrap-selectpicker 不改变框宽度

javascript - 在浏览器上滚动时将主菜单渲染到固定的导航栏中

javascript - 如何修复 snapsvg.js 中蒙版的位置?

javascript - 如何在图像上制作圆形蒙版

css - 有没有可以从 html 文件自动创建可能的 css 规则的软件?

c# - 通过 Selenium Webdriver 包含的文本选择一个元素

css - input[type ='text' ] CSS 选择器不适用于默认类型的文本输入?