CSS多類選擇器
寫的程式碼多了,就會發現,自己越來越無知了,總以為html css很簡單,已經掌握的很熟練了,其實我還差的很多。
平時沒有用過css的這種寫法 .a.b{display:block;} 上網一查才明白。
參考:http://www.w3school.com.cn/css/css_selector_class.asp
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>
本文轉自挨踢前端部落格園部落格,原文連結http://www.cnblogs.com/duanhuajian/archive/2012/12/17/2821524.html如需轉載請自行聯絡原作者
@挨踢前端
相關文章
- CSS class 類選擇器CSS
- CSS 偽類選擇器CSS
- css選擇器的分類CSS
- css多類選擇器用法介紹CSS
- CSS E:default 偽類選擇器CSS
- CSS E:disabled偽類選擇器CSS
- CSS E:disabled 偽類選擇器CSS
- CSS E:checked 偽類選擇器CSS
- CSS E:hover偽類選擇器CSS
- css選擇器分類總結CSS
- CSS E:hover 偽類選擇器CSS
- CSS3新增選擇器(屬性選擇器、結構偽類選擇器、偽元素選擇器)CSSS3
- CSS樣式中的通用選擇器和偽類選擇器CSS
- CSS :focus-within 偽類選擇器CSS
- CSS偽類選擇器是什麼CSS
- CSS @page:left列印偽類選擇器CSS
- CSS @page:first列印偽類選擇器CSS
- 002---選擇器(標籤選擇器、類選擇器、id選擇器、偽類選擇器、萬用字元選擇器)字元
- CSS 選擇器CSS
- CSS選擇器CSS
- CSS @page:right列印偽類選擇器CSS
- CSS選擇器種類及使用方法CSS
- CSS的總結(選擇器,偽類等…)CSS
- 【CSS】【3】CSS選擇器CSS
- CSS系列:CSS選擇器CSS
- CSS選擇器(5)——屬性選擇器CSS
- CSS ID選擇器與CLASS選擇器CSS
- 基本CSS選擇器,複合選擇器,後代選擇器CSS
- css偽類選擇符CSS
- CSS-選擇器6-兄弟選擇器CSS
- 徹底理解CSS結構偽類選擇器CSS
- CSS 連結偽類選擇器順序原理CSS
- CSS偽類與偽元素選擇器區別CSS
- css :target偽類選擇器簡單介紹CSS
- 從分類到結構之CSS選擇器CSS
- CSS :required 選擇器CSSUI
- CSS :optional 選擇器CSS
- css選擇器概述CSS