CSS中的各種選擇器與樣式優(yōu)先級(jí)小結(jié)

優(yōu)先級(jí):由高到低(從上到下)
!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)是加在選擇器后面的用來(lái)指定元素狀態(tài)的關(guān)鍵字。
鏈接相關(guān)
a:link 未訪問(wèn)的鏈接
a:visited 已訪問(wèn)的鏈接
a:hover 鼠標(biāo)移動(dòng)到鏈接上
a:active 選定的鏈接
:target 可用于選取當(dāng)前活動(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 代表沒(méi)有子元素的元素,只計(jì)算元素結(jié)點(diǎn)及文本(包括空格),注釋、運(yùn)行指令不考慮在內(nèi)。
:first-child 代表了某個(gè)元素,這個(gè)元素是它父元素的的第一個(gè)子元素
- :first-of-type
- :last-of-type
:nth-clild(n) 選擇器匹配屬于其父元素的第 N 個(gè)子元素,不論元素的類型
n 可以是數(shù)字、關(guān)鍵詞或公式(2,an + b,odd)(n 是計(jì)數(shù)器(從 0 開(kāi)始),b 是偏移值)
:nth-last-child(n)倒數(shù)
:nth-of-type(n)
屬性選擇器
E[attr]
E[attr=value]
E[attr~=value] 選擇器用于選取屬性值中包含指定詞匯的元素
E[attr^=value] 選擇器匹配屬性值以指定值開(kāi)頭的每個(gè)元素。
父子關(guān)系
A E 任何是元素A的后代元素E (后代節(jié)點(diǎn)指A的子節(jié)點(diǎn),子節(jié)點(diǎn)的子節(jié)點(diǎn),以此類推)
A > E 任何元素A的子元素(直接)
- E[attr*=value]
- 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選擇器設(shè)置標(biāo)簽樣式的實(shí)例代碼
這篇文章主要介紹了css選擇器設(shè)置標(biāo)簽樣式的實(shí)例代碼,需要的朋友可以參考下2018-11-22CSS3 :not()選擇器實(shí)現(xiàn)最后一行l(wèi)i去除某種css樣式
在日常開(kāi)發(fā)中經(jīng)常會(huì)遇到在循環(huán)中的最后一個(gè)li不同于其他的li,要去除某種css樣式,本文介紹的是利用CSS3新增的:not()偽類選擇符,實(shí)現(xiàn)起來(lái)非常的方便,感興趣的朋友們下面2016-10-19詳解CSS中的選擇器優(yōu)先級(jí)及樣式層疊問(wèn)題解決
CSS中的選擇器是分權(quán)重的,如果不加注意則很有可能會(huì)遇到樣式層疊的問(wèn)題,下面我們就來(lái)詳解CSS中的選擇器優(yōu)先級(jí)及樣式層疊問(wèn)題解決,需要的朋友可以參考下2016-06-14CSS3 :nth-child()偽類選擇器實(shí)現(xiàn)奇偶行顯示不同樣式
css3的強(qiáng)大,讓人驚嘆,今天我們就來(lái)“前瞻”一下CSS3的一個(gè)偽類選擇器“:nth-child()”實(shí)現(xiàn)奇偶行顯示不同樣式,具體的詳細(xì)示例可以參考下文,希望對(duì)大家有所幫助2013-11-05- 這篇文章主要介紹了html中css的使用方法,一般用class與id實(shí)現(xiàn)樣式的控制,不過(guò)jquery可以更好的控制,也是當(dāng)前比較流行的js框架,推薦大家學(xué)習(xí)2013-07-19
- 這篇文章主要介紹了CSS 樣式的使用方式、選擇器 的相關(guān)資料,需要的朋友可以參考下2019-08-12