CSS(CSS3)選擇器(2)
該部分主要為CSS3新增的選擇器
接上一篇 CSS(CSS3)選擇器(1)
一.通用兄弟選擇器:
24:E ~ F,匹配任何E元素之後的同級F元素。
div ~ p{ background-color:#00FF00; }
二.屬性選擇器:
25:E[att ^= val],匹配屬性att的值以”val“開頭的元素。
[id ^= start]{ background-color:red; ] /*匹配以id屬性的值為start開頭的,如id="start1",id="start2",id="start3"的元素*/
26:E[att $= val],匹配屬性att的值以”val“結尾的元素。
[id $= end]{ background-color:red; ] /*匹配以id屬性的值為end結尾的,如id="1end",id="2end",id="3end"的元素*/
27:E[att *= val],匹配屬性att的值包含”val“字符串的元素。
[id $= hass]{ background-color:red; ] /*匹配以id屬性的值包含hass的,如id="1hass",id="hass2",id="3hass444"的元素*/
三.結構性偽類選擇器:
28:E:root,匹配文檔的根元素,對於HTML文檔,就是HTML元素。(也就是說可能存在其他文檔形式時使用,選中的是該文檔類型的根元素)
:root{ background:red; } /*經測試,像div:root這樣的寫法是無效的*/
29:E:not,匹配不符合當前選擇器的任何元素。
h1:not(.name) { color: red; } /*其含義是,匹配所有h1元素的類名不為name的h1元素,如果:not選擇器前面不帶指明的元素是無效的*/
30:E:empty,匹配一個不包含任何子元素的元素,包括文本節點。
.box:empty{
background:pink;
}
31:E:target,匹配文檔中特定”id“,點擊後的效果。
:target{ background: red; } /*通常用於錨點定位後,定位的目標點樣式*/
32:E:last-child,匹配父元素的最後一個子元素。
li:last-child{ background-color:red; }
33:E:nth-child(n),匹配其父元素的第n個子元素,從1開始。
li:nth-child(2){ background-color:red; }
li:nth-child(odd){
background-color:red;
}
34:E:nth-last-child(n),匹配其父元素的倒數第n個子元素,倒數第一個的index為1。
li:nth-last-child(2){ background-color:red; }
li:nth-last-child(even){
background-color:red;
}
35:E:nth-of-type(n),與:nth-child()作用類似,但是僅匹配同類型的元素。
h2:nth-of-type(odd){
background:red;
}
36:E:nth-last-of-type(n),與:nth-last-child() 作用類似,但是僅匹配同類型的元素。
h2:nth-last-of-type(even){
background:red;
}
37:E:first-of-type,匹配父元素下使用同種標簽的第一個子元素。
h2:first-of-type{ background-color: yellow; }
38:E:last-of-type,匹配父元素下使用同種標簽的最後一個子元素。
h2:last-of-type{ background-color: yellow; }
39:E:only-child,匹配父元素下僅有的一個子元素,等同於:first-child:last-child或 :nth-child(1):nth-last-child(1)。
li:only-child{ background-color: yellow; }
40:E:only-of-type,匹配父元素下使用同種標簽的唯一一個子元素,等同於:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)。
li:only-of-type{ background-color: yellow; }
四.UI元素狀態偽類選擇器:
41:E:enabled,匹配表單中激活的元素。
input[type="text"]:enabled{ background-color:yellow; }
42:E:disabled,匹配表單中禁用的元素。
input[type="text"]:disabled{ background-color:purple; }
43:E:read-only,指定當元素處於只讀狀態時的樣式。
input[type="text"]:read-only{ background-color: gray; }
44:E:read-write,指定當元素處於非只讀狀態時的樣式。
input[type="text"]:read-write{ background-color: greenyellow; }
45:E:checked,匹配表單中被選中的radio(單選框)或checkbox(復選框)元素。
input[type="checkbox"]:checked { outline:2px solid blue; }
46:E:default,指定但頁面打開時默認處於選取狀態的單選框或復選框控件的樣式。需要註意的是,即使用戶將該單選框或復選框的選取狀態設定為非選取狀態,該樣式仍然有效。
input[type="checkbox"]:default { outline:2px solid blue; }
47:E:indeterminate,指定當頁面打開時,一組單選框中沒有任何一個單選框被設定為選取狀態時,整組單選框的樣式,如果用戶選取了任何一個單選框,那麽該樣式則取消。
input[type="radio"]:indeterminate{ outline: solid 3px blue; }
48:E::selection,用來指定該元素處於選中狀態時的樣式。
p::selection{ background:red; color:#FFF; } input[type="text"]::selection{ background:gray; color:#FFF; }
49:E:invalid,用來指定元素的內容無法通過H5元素的屬性所指定的檢查(required)或元素的內容不符合規定的格式(type=Email等)。
input[type="text"]:invalid{ background-color: red; }
50:E:valid,用來指定元素的內容可以通過H5元素的屬性所指定的檢查(required)或元素的內容不符合規定的格式(type=Email等)。
input[type="text"]:valid{ background-color: white; }
51:E:required,用來指定允許使用required屬性,並且已經指定了required屬性的input,select,textarea元素的樣式。
input[type="text"]:required{ border-color: red; border-width:3px; }
52:E:optional,用來指定允許使用required屬性,並且未指定了required屬性的input,select,textarea元素的樣式。
input[type="text"]:optional{ border-color: black; border-width:3px; }
53:E:in-range,用來指定當元素的有效值被限定在一定範圍之內(通常通過min屬性值或者max屬性值來限定),且實際輸入值在該範圍內時使用的樣式。
input[type="number"]:in-range{ background-color: white; }
54:E:out-of-range,用來指定當元素的有效值被限定在一定範圍之內(通常通過min屬性值或者max屬性值來限定),且實際輸入值不在該範圍內時使用的樣式。
input[type="number"]:out-of-range{ background-color: red; }
55:E::placeholder,用來改變文字占位符的樣式。
input::placeholder{
color:red;
}
至此,CSS(CSS3)選擇器的簡單說明筆記就到這裏結束了,其實這些內容包含了CSS(CSS3)世界的絕大多數常用選擇器,當然,還有些不常用的如果大家有興趣,可以自行搜索資料。
參考:css選擇器筆記,30個你必須熟記的css選擇器,MDN-docs-選擇器介紹,HTML5和CSS3權威指南(第3版下冊-廬陵牛)第十九章,before和after偽元素的用法。
CSS(CSS3)選擇器(2)