- 屬性選擇器[]
a[href][title=123] {color:red;} //注意[]裏面的=後面不用加“ ”或者‘ ’
意思是找到具有href和title=123兩個屬性的a元素，並且將顏色改爲red
.css文件 [title]{
color:red; //帶有title屬性的都變紅
}
- ul li {color:red;} 空格表示子代，就是包含關係，將ul下面的li改成紅色的
- # id選擇器，. class選擇器 例如 span.dijitButtonNode就是選中了有這個類的span ！！！！ # id選擇器 區分大小寫
實戰
span[widgetid=clear-search] span.dijitButtonNode
表示先選中
widgetid
=clear-search的span，(空格)再在他的子代中找具有class=
dijitButtonNode的span
- 選擇器分組
/* no grouping */
h1 {color:blue;}
h2 {color:blue;}
h3 {color:blue;}
h4 {color:blue;}
h5 {color:blue;}
h6 {color:blue;}
/* grouping */
h1, h2, h3, h4, h5, h6 {color:blue;}
兩者等價，具有統一屬性的可以放在一起用“，”分開
- 多類選擇器
p<class="a b"> //這個p元素有兩個類名，a和b
.a.b{color:red;} //同時擁有a和b類的元素變成紅色
- 多屬性的時候
屬性與屬性值必須完全匹配
請注意，這種格式要求必須與屬性值完全匹配。
如果屬性值包含用空格分隔的值列表，匹配就可能出問題。
請考慮一下的標記片段：
<p class="important warning">This paragraph is a very important warning.</p>
如果寫成 p[class="important"]，那麼這個規則不能匹配示例標記。
要根據具體屬性值來選擇該元素，必須這樣寫：（並不是必須）
p[class="important warning"] {color: red;}
還可以~
p[class~="important"] {color: red;}
也是可以的！！！
-
img[title~="Figure"] {border: 1px solid gray;}這個規則會選擇 title 文本包含 "Figure" 的所有圖像。沒有 title 屬性或者 title 屬性中不包含 "Figure" 的圖像都不會匹配。 - 子串匹配屬性選擇器（在屬性選擇的時候加入正則表達式）
|
[abc^="def"]
|
選擇 abc 屬性值以 "def" 開頭的所有元素
|
|
[abc$="def"]
|
選擇 abc 屬性值以 "def" 結尾的所有元素
|
|
[abc*="def"]
|
選擇 abc 屬性值中包含子串 "def" 的所有元素
|