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