title: CSS選擇器
date: 2016-11-14 08:50
tags: CSS
0x00 基礎(chǔ)選擇器
通配選擇器
設(shè)置所有標(biāo)簽使用相同樣式
如: *{ };
不推薦通配符選擇器，因?yàn)樗切阅茏畹偷囊粋€(gè)選擇器偎球。
標(biāo)簽選擇器
為所有相同標(biāo)簽設(shè)置相同樣式
如: p{ };
類選擇器
為一組相同的標(biāo)簽設(shè)置相同的樣式
如: .classname{ };
ID選擇器
ID選擇器在頁面中只能被調(diào)用一次
如: #idname{ };
0x02 組合選擇器
群組選擇器
如: p , body , img , div {}
相鄰兄弟選擇器
如果需要選擇緊接在另一個(gè)元素后的元素洒扎，而且二者有相同的父元素，可以使用相鄰兄弟選擇器
如：p + p { color:red;}
通用兄弟選擇器
匹配某元素之后的所有兄弟元素衰絮。
如: h2~a { }
包含（后代）選擇器
如： body ul li {}
子元(子代)素選擇器
如: div > p{}
標(biāo)簽a必須跟在h2之后(不一定緊跟),當(dāng)然袍冷，前提是他們擁有相同的父元素。
子代選擇器和后代選擇器的區(qū)別
后代選擇器的寫法就是把外層的標(biāo)記寫在前面猫牡，內(nèi)層的標(biāo)記寫在后面胡诗，之間用空格分隔。
子選擇器只對直接后代有影響的選擇器淌友，而對“孫子后代”以及多層后代不產(chǎn)生作用煌恢。
0x03 狀態(tài)偽類選擇器
定義樣式在標(biāo)簽的狀態(tài)之上，而不是標(biāo)簽本身
a:link {} #點(diǎn)擊前
a:hover {} #鼠標(biāo)懸停時(shí)
a:focus {} #獲得聚焦時(shí)
a:active {} #點(diǎn)擊時(shí)
a:visited {} #點(diǎn)擊后
下面的元素狀態(tài)偽類震庭，通常用于表單中瑰抵，如：
:enabled,:disabled,:checked(只用于單選按鈕和復(fù)選框)
0x04 目標(biāo)偽類
:target
通常設(shè)置用于錨點(diǎn)被選中時(shí)的樣式。
<p><a href="#box">點(diǎn)我旋轉(zhuǎn)放大Box</a></p>
<div id="box"></div>
//CSS
#box:target {
border:4px solid red;
transform: rotateZ(60deg) scale(1.8);
transition: all 4s;
}
0x05 否定偽類
:not(selectoe)
匹配非指定/選擇器的每個(gè)元素器联。
body:not(first-chid){}
input:not([type=text]){}
0x06 結(jié)構(gòu)化偽類
:first-child
:first-of-type
匹配父元素的所有該子元素類型中第一個(gè)出現(xiàn)的元素.
div :first-of-type {
background-color: lime;
}
(注意div后面的空格二汛，這使得element變?yōu)榱薲iv的所有后代元素)
:last-child
:last-of-type
表示了在（它父元素的）子元素列表中，最后一個(gè)給定類型的元素拨拓。
匹配在 p 元素內(nèi)部的 最后一個(gè) em 元素:
p em:last-of-type{
//
}
:nth-child(an+b)
如:nth-child(2n)等價(jià)于nth-child(even),nth-child(2n+1) 等價(jià)于 nth-child(odd).或者是nth-child(3n)
:nth-last-child(an+b)
:nth-of-type(an+b)
匹配一個(gè)在文檔樹中位置為an+b-1 且和偽元素前名字一樣 的元素,想在不受同胞異類元素和父元素影響保證自己選擇相同類型得元素肴颊，這個(gè)偽元素更加靈活實(shí)用.
0x07 偽元素選擇器
::first-line {}
選取某元素中的第一行
::first-letter{}
選擇某元素中的第一個(gè)字或首字母
:: selection
應(yīng)用于文檔中被用戶高亮的部份
0x08 生成性內(nèi)容
::after
::before
0x09 屬性選取器
屬性名選擇器
如： img[title] {color:red}
屬性值選擇器
如: img[title="red floewr"] { }
[attr~=value]
[attr|=value]
[attr^=value]
[attr$=value]
[attr*=value]
0x0A 選擇器的優(yōu)先級
行內(nèi)樣式(1000) --> ID選擇器(100) --> 類選擇器(10) --> 標(biāo)簽選擇器(1) --> 全局選擇器(0)
參考文檔:
https://developer.mozilla.org/zh-CN/docs/Web/CSS/:last-of-type
