CSS：[hidden] {display：none}

Question

有人能让我知道括号在下面的CSS代码中的含义hidden的含义吗？它是否寻找html代码中名为hidden的类将其显示属性设置为none？如果是这样，托槽不是多余的吗？

[hidden] { 
    display: none; 
} 

Answer 1

Attribute selectors 

CSS 2.1允许作者指定匹配具有在源文档中定义的某些属性的元素的规则。当元素设置了 “ATT” 属性，无论属性的 值

1. [att]比赛：

   Matching attributes and attribute values

   属性选择器可匹配四种方式。

2. [att=val]当元素的“att”属性值恰好为 “val”时匹配。
3. [att~=val]表示具有att属性的元素，其值 是以空格分隔的单词列表，其中一个单词恰好是 “val”。如果“val”包含空格，它将永远不会代表 任何内容（因为单词之间用空格分隔）。如果“val”是 空字符串，它也不会代表任何东西。
4. [att|=val]表示具有att属性的元素，其值 或者完全是“val”或者以“val”开始，后跟“ - ”（U + 002D），后跟 。这主要是为了允许 语言子代码匹配（例如，HTML中的 元素上的hreflang属性），如BCP 47（[BCP47]）或其后继者所述。 对于lang（或xml：lang）语言的子代码匹配，请参阅 ：lang伪类。属性值必须是标识符或字符串。 选择器 中属性名称和值的区分大小写取决于文档语言。

例如，以下属性选择所有H1元素匹配 指定“标题”属性，不管其值：

h1[title] { color: blue; } 

在下面的例子中，选择匹配所有SPAN元素的“类”属性的值恰好为“示例”：

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

Mult可以使用iple属性选择器来引用元素的几个属性，甚至可以引用相同属性的几个属性。

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

以下选择说明：

在此，选择所有SPAN元件，其“你好”属性恰好具有值“克利夫兰”且“再见”属性恰好具有值“哥伦布”匹配“=”和“〜=”之间的差异。例如，第一个选择器将匹配“rel”属性的值“copyright copyleft copyeditor”。当“href”属性的值为“http://www.w3.org/”时，第二个选择器才会匹配。

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