1. 程式人生 > >CSS 多類選擇器一個class值可以包含一個詞列表

CSS 多類選擇器一個class值可以包含一個詞列表

 IE6不支援類選擇符鏈,當一個元素只要使用了最後一個定義的類選擇符就可以顯示定義的樣式,也就是隻識別示例中最後的一個com,IE7支援類選擇符鏈類選擇器允許以一種獨立於文件元素的方式來指定樣式。該選擇器可以單獨使用,也可以與其他元素結合使用;總以為html css很簡單,已經掌握的很熟練了,其實我還差的很多;在 HTML 中,一個class 值中可能包含一個詞列表,各個詞之間用空格分隔 寫的程式碼多了,就會發現,自己越來越無知了,總以為html css很簡單,已經掌握的很熟練了,其實我還差的很多。 

平時沒有用過css的這種寫法 .a.b{display:block;} 上網一查才明白。 

1、在 HTML 中,一個 class 值中可能包含一個詞列表,各個詞之間用空格分隔。例如,如果希望將一個特定的元素同時標記為重要(important)和警告(warning),就可以寫作(這兩個詞的順序無關緊要,寫成 warning important 也可以): 

複製程式碼 程式碼如下:
<p class="important warning">This paragraph is a very important warning.</p>

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

複製程式碼 程式碼如下:
.important {font-weight:bold;}.warning {font-weight:italic;}.important.warning {background:silver;}

2、通過把兩個類選擇器連結在一起,僅可以選擇同時包含這些類名的元素(類名的順序不限)。 

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

複製程式碼 程式碼如下:
.important.urgent {background:silver;}

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

複製程式碼 程式碼如下:
<p class="important urgent warning">This paragraph is a very important and urgent warning.</p>