CSS3 Html5學習筆記之CSS3多類選擇器

css 多類選擇器

我們處理了 class 值中包含乙個詞的情況。在 html 中，乙個 class 值中可能包含乙個詞列表，各個詞之間用空格分隔。例如，如果希望將乙個特定的元素同時標記為重要（important）和警告（warning），就可以寫作：

this paragraph is a very important warning.

這兩個詞的順序無關緊要，寫成 warning important 也可以。

我們假設 class 為 important 的所有元素都是粗體，而 class 為 warning 的所有元素為斜體，class 中同時包含 important 和 warning 的所有元素還有乙個銀色的背景。就可以寫作：

.important .warning .important.warning

demo 展示：

通過把兩個類選擇器鏈結在一起，僅可以選擇同時包含這些類名的元素（類名的順序不限）。

如果乙個多類選擇器包含類名列表中沒有的乙個類名，匹配就會失敗。請看下面的規則：

.important.urgent

不出所料，這個選擇器將只匹配 class 屬性中包含詞 important 和 urgent 的 p 元素。因此，如果乙個 p 元素的 class 屬性中只有詞 important 和 warning，將不能匹配。不過，它能匹配以下元素：

this paragraph is a very important and urgent warning.

demo展示: