- 屬性選擇器[]
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" 的所有元素
|