CSS：[隐藏] {display：none}

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”包含空格，则它永远不会代表 任何事情（因为这些词是用空格分隔的）。如果“val”是 空字符串，它永远不会代表任何东西。
4. [att|=val]表示具有att属性及其值的元素 或者正好是“val”或者以“val”开头 接着是“ - ”（U + 002D）。这主要是为了允许 语言子码匹配（例如，a上的hreflang属性） 如BCP 47（[BCP47]）或其后继者中所述的HTML中的元素。 对于lang（或xml：lang）语言子代码匹配，请参阅 ：lang伪类。属性值必须是标识符或字符串。 选择器中属性名称和值的区分大小写 取决于文档语言。

  

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

h1[title] { color: blue; }

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

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

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

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

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/"]