CSS中的選擇器與樣式優(yōu)先級是怎樣的

這篇文章給大家介紹CSS中的選擇器與樣式優(yōu)先級是怎樣的，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

優(yōu)先級：由高到低(從上到下)

!important
內(nèi)聯(lián)(1,0,0,0)
id: (0,1,0,0)
類：(0,0,1,0)
偽類/屬性
元素：(0,0,0,1)
通配符
類選擇器
class="web",多個(gè)元素可以擁有同一個(gè)類名

id選擇器
id="web",具有唯一性

偽類選擇器
CSS偽類（pseudo-class）是加在選擇器后面的用來指定元素狀態(tài)的關(guān)鍵字。

鏈接相關(guān)
a:link 未訪問的鏈接
a:visited 已訪問的鏈接
a:hover 鼠標(biāo)移動到鏈接上
a:active 選定的鏈接
:target 可用于選取當(dāng)前活動的目標(biāo)元素,href="#222"（內(nèi)容跳轉(zhuǎn)）

表單元素相關(guān)
:focus 偽類在元素獲得焦點(diǎn)時(shí)向元素添加特殊的樣式
:disabled 匹配每個(gè)被禁用的元素（大多用在表單元素上）。
:enabled 表示任何啟用的（enabled）元素
:checked 匹配每個(gè)已被選中的 input 元素（只用于單選按鈕和復(fù)選框)(只有opera支持)

父子相關(guān)
:empty 代表沒有子元素的元素，只計(jì)算元素結(jié)點(diǎn)及文本（包括空格），注釋、運(yùn)行指令不考慮在內(nèi)。

:first-child 代表了某個(gè)元素，這個(gè)元素是它父元素的的第一個(gè)子元素

CSS Code復(fù)制內(nèi)容到剪貼板

1. :first-of-type   

2. :last-of-type  

:nth-clild(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素，不論元素的類型
n 可以是數(shù)字、關(guān)鍵詞或公式(2,an + b,odd)(n 是計(jì)數(shù)器（從 0 開始），b 是偏移值)
:nth-last-child(n)倒數(shù)
:nth-of-type(n)

屬性選擇器
E[attr]
E[attr=value]
E[attr~=value] 選擇器用于選取屬性值中包含指定詞匯的元素

E[attr^=value] 選擇器匹配屬性值以指定值開頭的每個(gè)元素。
父子關(guān)系
A E 任何是元素A的后代元素E (后代節(jié)點(diǎn)指A的子節(jié)點(diǎn)，子節(jié)點(diǎn)的子節(jié)點(diǎn)，以此類推)
A > E 任何元素A的子元素(直接)

CSS Code復(fù)制內(nèi)容到剪貼板

1. E[attr*=value]   

2. E[attr$=value]  

基于關(guān)系的選擇器

兄弟關(guān)系
B + E 任何元素B的下一個(gè)兄弟元素E(直接)
B ~ E B元素后面的擁有共同父元素的兄弟元素E

且
.class1.class2 同時(shí)包含class1和class2屬性的元素
F#id 具有某id的F元素

或
E,F 所有E或F元素

偽元素
E:first-line 向文本的首行添加特殊樣式。
E:first-letter 向文本的第一個(gè)字母添加特殊樣式。
E:before 在元素之前添加內(nèi)容。
E:after 在元素之后添加內(nèi)容。

關(guān)于CSS中的選擇器與樣式優(yōu)先級是怎樣的就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。