CSS選擇器
- 1)標(biāo)簽選擇器(標(biāo)簽)
語(yǔ)法： 元素名稱(chēng){屬性：屬性值；...}
span{ /* 選擇所有的span標(biāo)簽*/
padding:10px;
background:cyan;
}
- 2）id選擇器（#）
語(yǔ)法： #id名{屬性：屬性值；...}
#text{ /* 選擇id="text"的標(biāo)簽*/
width: 300px;
height: 50px;
line-height: 50px;
margin: 15px 0px;
text-align: center;
background: hotpink;
}
- 3）class選擇器（.）
語(yǔ)法： .class名{屬性：屬性值；...}
.box1{ /* 選擇class="box1"的元素*/
background: pink;
}
- 4）交集選擇器
用于選擇同時(shí)具有多個(gè)選擇器匹配的元素
div.box2{ /* 選擇div并且class="box2"的元素*/
background: yellow;
}
- 5）并集選擇器（群組選擇器）（,）
語(yǔ)法： 選擇器1,選擇器2,選擇器3{屬性：屬性值；...}
h3,.list{ /* 選擇h3以及class="list"的元素*/
border: 1px solid blue;
}
- 6）后代選擇器(包含選擇器)（用空格隔開(kāi)）
語(yǔ)法： 父標(biāo)簽 子標(biāo)簽{屬性：屬性值；...}
.box p a{ /* 選擇.box后代中包含p的并且p下面包含a的*/
color:orange;
font-weight: bold;
}
- 7）子元素選擇器(>)
語(yǔ)法： 父標(biāo)簽>子標(biāo)簽{屬性：屬性值；...}
.box>p>a{ /* 選擇.box直級(jí)孩子為p并且p直級(jí)孩子是a的*/
color:green;
}
- 8）屬性選擇器
語(yǔ)法：
E[attr] //用于選取帶有指定屬性的元素
E[attr = value]//用于選取帶有指定屬性值的元素
E[attr ~= value]//用于選取屬性值中包含指定詞匯的元素
E[attr |= value]//用于選取帶有指定值value-開(kāi)頭的或者值為value的元素
E[attr ^= value] //用于選取屬性值以value開(kāi)頭的元素
E[attr $= value] //用于選取屬性值以value結(jié)尾的元素
E[attr *= value] //用于選取屬性值中包含value的元素
-
9）結(jié)構(gòu)偽類(lèi)選擇器
1、偽類(lèi)選擇器
類(lèi)選擇器和偽類(lèi)選擇器的區(qū)別在于，類(lèi)選擇器我們可以隨意起名，
而偽類(lèi)選擇器是CSS中已經(jīng)定義好的選擇器，不可以隨意起名。最常見(jiàn)的偽類(lèi)選擇器 a:link{ color: #ff6600 } /* 未被訪(fǎng)問(wèn)的鏈接 */ a:visited{ color: #87b291 } /* 已被訪(fǎng)問(wèn)的鏈接 */ a:hover{ color: #6535b2 } /* 鼠標(biāo)指針移動(dòng)到鏈接上 */ a:active{ color: #55b28e } /* 正在被點(diǎn)擊的鏈接 */2、偽元素選擇器
在CSS中，主要有四個(gè)偽元素選擇器。
* first-line偽元素選擇器
用于向某個(gè)元素中的第一行文字使用樣式。
* first-letter偽元素選擇器
用于向某個(gè)元素中的文字的首字母（歐美文字）或第一個(gè)字（中文或者是日文等漢字）使用樣式。
* before偽元素選擇器
用于在某個(gè)元素之前插入一些內(nèi)容。
* after偽元素選擇器
用于在某個(gè)元素之后插入內(nèi)容。3、結(jié)構(gòu)性偽類(lèi)選擇器root、not、empty和target
結(jié)構(gòu)性偽類(lèi)選擇器
* root選擇器
將樣式綁定到頁(yè)面的根元素中。
* not選擇器
想對(duì)某個(gè)結(jié)構(gòu)元素使用樣式，但是想排除這個(gè)結(jié)構(gòu)元素下面的子結(jié)構(gòu)元素，讓它不使用這個(gè)樣式時(shí)，我們就可以使用not選擇器。
* empty選擇器
指定當(dāng)元素中內(nèi)容為空白時(shí)使用的樣式。
* target選擇器
對(duì)頁(yè)面中某個(gè)target元素指定樣式，該樣式只在用戶(hù)點(diǎn)擊了頁(yè)面中的超鏈接，并且跳轉(zhuǎn)到target元素后起作用。4、選擇器first-child、last-child、nth-child、nth-last-child、only-child
- E:first-child選擇器
E:first-child單獨(dú)指定第一個(gè)子元素的的樣式。 - E:last-child選擇器
E:last-child單獨(dú)指定最后一個(gè)子元素的的樣式。 - E:nth-child選擇器
E:nth-child(n) 選擇器匹配正數(shù)下來(lái)第 N 個(gè)子元素
E:nth-child(odd)選擇器匹配正數(shù)下來(lái)第奇數(shù)個(gè)子元素
E:nth-child(even)選擇器匹配正數(shù)下來(lái)第偶數(shù)個(gè)子元素 - E:nth-last-child選擇器
E:nth-last-child(n) 選擇器匹配倒數(shù)數(shù)下來(lái)第 N 個(gè)子元素
E:nth-last-child(odd)選擇器匹配倒數(shù)數(shù)下來(lái)第奇數(shù)個(gè)子元素
E:nth-last-child(even)選擇器匹配倒數(shù)下來(lái)第偶數(shù)個(gè)子元素 - E:only-child選擇器，只對(duì)唯一的子元素起作用
- E:first-of-type 找第一個(gè)同類(lèi)型的
- E:last-of-type 找最后一個(gè)同類(lèi)型的
- E:nth-of-type選擇器
E:nth-of-type(n) 選擇器所在父元素中同類(lèi)型第n個(gè)位置匹配的子元素
E:nth-of-type(odd)選擇器所在父元素中同類(lèi)型奇數(shù)位置匹配的子元素
E:nth-of-type(even)選擇器所在父元素中同類(lèi)型偶數(shù)位置匹配的子元素 - E:nth-last-of-type選擇器
E:nth-last-of-type(n) 選擇器所在父元素中同類(lèi)型倒數(shù)第n個(gè)位置匹配的子元素
E:nth-last-of-type(odd)選擇器所在父元素中同類(lèi)型倒數(shù)奇數(shù)位置匹配的子元素
E:nth-last-of-type(even)選擇器所在父元素中同類(lèi)型倒數(shù)偶數(shù)位置匹配的子元素 - E:only-of-type 選擇父元素只包含一個(gè)類(lèi)型子元素的元素
點(diǎn)擊查看:first-child與first-of-type區(qū)別
css3之結(jié)構(gòu)性偽類(lèi)選擇器 - E:first-child選擇器
10）UI狀態(tài)偽類(lèi)選擇器
所謂UI選擇器：就是指定的樣式只有當(dāng)元素處于某種狀態(tài)下時(shí)，才起作用，在默認(rèn)狀態(tài)下不起作用！
- E:hover選擇器被用來(lái)指定當(dāng)鼠標(biāo)指針移動(dòng)到元素上時(shí)元素所使用的樣式
- E:active選擇器被用來(lái)指定元素被激活時(shí)使用的樣式
- E:focus選擇器被用來(lái)指定元素獲得光標(biāo)聚焦點(diǎn)使用的樣式，主要是在文本框控件獲得聚焦點(diǎn)并進(jìn)行文字輸入時(shí)使用。
- E:enabled選擇器被用來(lái)指定當(dāng)元素處于可用狀態(tài)時(shí)的樣式。
- E:disabled選擇器被用來(lái)指定當(dāng)元素處于不可用狀態(tài)時(shí)的樣式。
- E:read-only選擇器被用來(lái)指定當(dāng)元素處于只讀狀態(tài)時(shí)的樣式。
- E:read-write選擇器被用來(lái)指定當(dāng)元素處于非只讀狀態(tài)時(shí)的樣式。
- E:cehcked偽類(lèi)選擇器用來(lái)指定當(dāng)表單中的radio單選框或者是checkbox復(fù)選框處于選取狀態(tài)時(shí)的樣式。
- E:default選擇器用來(lái)指定當(dāng)頁(yè)面打開(kāi)時(shí)默認(rèn)處于選取狀態(tài)的單選框或復(fù)選框的控件的樣式。
- E:indeterminate選擇器用來(lái)指定當(dāng)頁(yè)面打開(kāi)時(shí)，一組單選框中沒(méi)有任何一個(gè)單選框被設(shè)定為選中狀態(tài)時(shí)，整組單選框的樣式。
- E:selection偽類(lèi)選擇器用來(lái)指定當(dāng)元素處于選中狀態(tài)時(shí)的樣式。
- E:invalid偽類(lèi)選擇器用來(lái)指定，當(dāng)元素內(nèi)容不能通過(guò)HTML5通過(guò)使用的元素的諸如requirde等屬性所指定的檢查或元素內(nèi)容不符合元素規(guī)定的格式時(shí)的樣式。
- E:valid偽類(lèi)選擇器用來(lái)指定，當(dāng)元素內(nèi)容能通過(guò)HTML5通過(guò)使用的元素的諸如requirde等屬性所指定的檢查或元素內(nèi)容符合元素規(guī)定的格式時(shí)的樣式。
- E:required偽類(lèi)選擇器用來(lái)指定允許使用required屬性，而且已經(jīng)指定了required屬性的input元素、select元素以及textarea元素的樣式。
- E:optional偽類(lèi)選擇器用來(lái)指定允許使用required屬性，而且未指定了required屬性的input元素、select元素以及textarea元素的樣式。
- E:in-range偽類(lèi)選擇器用來(lái)指定當(dāng)元素的有效值被限定在一段范圍之內(nèi)，且實(shí)際的輸入值在該范圍之內(nèi)時(shí)的樣式。
- E:out-of-range偽類(lèi)選擇器用來(lái)指定當(dāng)元素的有效值被限定在一段范圍之內(nèi)，但實(shí)際輸入值在超過(guò)時(shí)使用的樣式。
-
11）兄弟選擇器
通用兄弟元素選擇器：它是用來(lái)指定位于同一個(gè)父元素之中的某個(gè)元素之后的所有其他某個(gè)種類(lèi)的兄弟元素所使用的樣式。
語(yǔ)法：
<子元素>~<子元素之后的同級(jí)兄弟元素>{
CSS樣式
}相鄰兄弟選擇器：只選取該元素相鄰的兄弟選擇器
語(yǔ)法：
<子元素>+<子元素之后的同級(jí)兄弟元素>{
CSS樣式
} -
12）通配符選擇器(全局選擇器)（*）
*{ padding:0; margin:0; } div *{ background"pink; }
CSS選擇器優(yōu)先級(jí)
CSS優(yōu)先級(jí)：是由四個(gè)級(jí)別和各級(jí)別的出現(xiàn)次數(shù)決定的。
四個(gè)級(jí)別分別為：行內(nèi)選擇符、ID選擇符、類(lèi)別選擇符、元素選擇符。
優(yōu)先級(jí)的算法：
每個(gè)規(guī)則對(duì)應(yīng)一個(gè)初始"四位數(shù)"：0、0、0、0
若是 行內(nèi)選擇符，則加1、0、0、0
若是 ID選擇符，則加0、1、0、0
若是 類(lèi)選擇符/屬性選擇符/偽類(lèi)選擇符，則分別加0、0、1、0
若是 元素選擇符/偽元素選擇符，則分別加0、0、0、1
算法：將每條規(guī)則中，選擇符對(duì)應(yīng)的數(shù)相加后得到的四位數(shù)，從左到右進(jìn)行比較，大的優(yōu)先級(jí)越高。
需注意的：
①、!important的優(yōu)先級(jí)是最高的，但出現(xiàn)沖突時(shí)則需比較四位數(shù);
?、凇?yōu)先級(jí)相同時(shí)，則采用就近原則，選擇最后出現(xiàn)的樣式;
③、繼承得來(lái)的屬性，其優(yōu)先級(jí)最低;
!important > 行內(nèi)樣式>ID選擇器 > 類(lèi)選擇器 > 標(biāo)簽 > 通配符 > 繼承 > 瀏覽器默認(rèn)屬性
css選擇器使用強(qiáng)烈建議采用低權(quán)重原則，利于充分發(fā)揮css的繼承性，復(fù)用性，模塊化、組件化。
CSS 選擇器權(quán)重計(jì)算規(guī)則
CSS優(yōu)先級(jí)及important屬性
