CSS3選擇器02—CSS3部分選擇器

zaking發表於2018-03-10
CSSS3

該部分主要為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偽元素的用法。

相關文章