CSS：[隐藏] {显示：无} [重复]

Question

有人可以告诉我以下 CSS 代码中 hidden 一词周围的括号是什么意思吗？它是否在html 代码中查找名为hidden 的类以将其显示属性设置为none？如果是这样，括号不是多余的吗？

[hidden] {
    display: none;
}

Answer 1

Attribute selectors

CSS 2.1 允许作者指定匹配具有源文档中定义的某些属性的元素的规则。

Matching attributes and attribute values

属性选择器可以通过四种方式匹配：

1. [att] 当元素设置“att”属性时匹配，无论 属性的值。
2. [att=val]当元素的“att”属性值正好匹配时匹配 “val”。
3. [att~=val] 表示具有 att 属性的元素，其值 是一个以空格分隔的单词列表，其中一个恰好是 “瓦尔”。如果 "val" 包含空格，它永远不会代表 任何东西（因为单词用空格分隔）。如果“val”是 空字符串，它也永远不会代表任何东西。
4. [att|=val] 表示具有att属性的元素，其值 要么完全是“val”，要么立即以“val”开头 后跟“-”（U+002D）。这主要是为了让 语言子代码匹配（例如，a 上的 hreflang 属性 HTML 中的元素），如 BCP 47 ([BCP47]) 或其后续版本中所述。 对于 lang（或 xml:lang）语言子码匹配，请参见 :lang 伪类。属性值必须是标识符或字符串。 选择器中属性名称和值的大小写敏感 取决于文档语言。

例如，以下属性选择器匹配所有 H1 元素 指定“title”属性，无论其值如何：

h1[title] { color: blue; }

在下面的例子中，选择器匹配所有“class”属性的值为“example”的SPAN元素：

span[class=example] { color: blue; }

多个属性选择器可以用来引用一个元素的多个属性，甚至可以多次引用同一个属性。

这里，选择器匹配所有“hello”属性的值为“Cleveland”且“goodbye”属性的值为“Columbus”的所有SPAN元素：

span[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

以下选择器说明了“=”和“~=”之间的区别。例如，第一个选择器将匹配“rel”属性的值“copyright copyleft copyeditor”。只有当“href”属性的值为“http://www.w3.org/”时，第二个选择器才会匹配。

a[rel~="copyright"]
a[href="http://www.w3.org/"]