css - css中的多个冒号

Question

我在 CSS 中看到一行代码是这样的:

[icon]:not([focused]):not([pressed]):not([disabled]){ background-position-y:-0px;  }

在这种情况下，多个冒号是什么意思？他们仍然是伪选择器吗？

Answer 1

它不是伪选择器——它是伪类的选择器。引用 W3C Selectors Level 3 doc :

6.6.7. The negation pseudo-class The negation pseudo-class, :not(X), is a functional notation taking a simple selector (excluding the negation pseudo-class itself) as an argument. It represents an element that is not represented by its argument. [...]

The following selector matches all button elements in an HTML document that are not disabled.

button:not([DISABLED])

The following group of selectors represents all HTML elements except links.

html|*:not(:link):not(:visited)

最后一个示例(以及 this answer)表明，如果您想要为某个元素设置规则，则使用多个 :not 伪类选择器链是非常有效的这不是提到的几种类型中的任何一种。

在您的情况下，选择器捕获所有设置了 icon 属性(为任何值)的元素 - 除了那些具有 focused、pressed 或 disabled 设置(再次，任何值)。