CSS 多类选择器
寫的代碼多了,就會(huì)發(fā)現(xiàn),自己越來越無知了,總以為html css很簡單,已經(jīng)掌握的很熟練了,其實(shí)我還差的很多。
平時(shí)沒有用過css的這種寫法 ?.a.b{display:block;}?? 上網(wǎng)一查才明白。
參考:http://www.w3school.com.cn/css/css_selector_class.asp
1、在 HTML 中,一個(gè) class 值中可能包含一個(gè)詞列表,各個(gè)詞之間用空格分隔。例如,如果希望將一個(gè)特定的元素同時(shí)標(biāo)記為重要(important)和警告(warning),就可以寫作(這兩個(gè)詞的順序無關(guān)緊要,寫成 warning important 也可以):
<p class="important warning"> This paragraph is a very important warning. </p>我們假設(shè) class 為 important 的所有元素都是粗體,而 class 為 warning 的所有元素為斜體,class 中同時(shí)包含 important 和 warning 的所有元素還有一個(gè)銀色的背景 。就可以寫作:
.important {font-weight:bold;} .warning {font-weight:italic;} .important.warning {background:silver;}?
2、通過把兩個(gè)類選擇器鏈接在一起,僅可以選擇同時(shí)包含這些類名的元素(類名的順序不限)。
如果一個(gè)多類選擇器包含類名列表中沒有的一個(gè)類名,匹配就會(huì)失敗。請(qǐng)看下面的規(guī)則:
.important.urgent {background:silver;}不出所料,這個(gè)選擇器將只匹配 class 屬性中包含詞 important 和 urgent 的 p 元素。因此,如果一個(gè) p 元素的 class 屬性中只有詞 important 和 warning,將不能匹配。不過,它能匹配以下元素:
<p class="important urgent warning"> This paragraph is a very important and urgent warning. </p>?
總結(jié)
- 上一篇: CSS子选择符
- 下一篇: javascript DOM对象