2鐘搞定CSS選擇器

大師兄

在最近的web開發(fā)中是不是就會(huì)用到一些選擇器，發(fā)現(xiàn)很多尤其是CSS3新增的不太熟悉，在此總結(jié)一下。

優(yōu)先級

不同級別

1. 在屬性后面使用 !important 會(huì)覆蓋頁面內(nèi)任何位置定義的元素樣式。

2.作為style屬性寫在元素內(nèi)的樣式

3.id選擇器

4.類選擇器

5.標(biāo)簽選擇器

6.通配符選擇器

7.瀏覽器自定義

同一級別

同一級別中后寫的會(huì)覆蓋先寫的樣式

基礎(chǔ)選擇器

選擇器	含義
*	通用元素選擇器，匹配頁面任何元素（這也就決定了我們很少使用）
#id	id選擇器，匹配特定id的元素
.class	類選擇器，匹配class包含(不是等于)特定類的元素
element	標(biāo)簽選擇器

*        {            /*頁面所有元素都使用*/            border:0;        }        #test        {            /*id=test 的元素*/            background-color:#0e0;        }        .staus        {            /*含有類status的元素*/            border:0;        }        div        {            /*頁面所有div*/             background-color:#0e0;        }

組合選擇器

選擇器	含義
E,F	多元素選擇器，用”,分隔，同時(shí)匹配元素E或元素F
E F	后代選擇器，用空格分隔，匹配E元素所有的后代（不只是子元素、子元素向下遞歸）元素F
E>F	子元素選擇器，用”>”分隔，匹配E元素的所有直接子元素
E+F	直接相鄰選擇器，匹配E元素之后的相鄰的同級元素F
E~F	普通相鄰選擇器（弟弟選擇器），匹配E元素之后的同級元素F（無論直接相鄰與否）
.class1.class2	這個(gè)姑且也算一個(gè)吧，沒什么名字，匹配類名中既包含class1又包含class2的元素

我就不一一舉例子了，選擇器并不是只能寫兩層，發(fā)現(xiàn)有些小朋友有這種誤解，認(rèn)為只能寫E>F這樣的，我們寫可以寫E>F.class Element這樣，你要你搞得定優(yōu)先級

屬性選擇器

選擇器	含義
E[attr]	匹配所有具有屬性attr的元素，div[id]就能取到所有有id屬性的div
E[attr=value]	匹配屬性attr值為value的元素，div[id=test],匹配id=test的div
E[attr~=value]	匹配所有屬性attr具有多個(gè)空格分隔、其中一個(gè)值等于value的元素
E[attr|=value]	匹配所有att屬性具有多個(gè)”-”分隔、其中一個(gè)值以value開頭的元素，主要用于lang屬性，比如“en”、“en-us”
E[attr ^=value]	匹配屬性attr的值以value開頭的元素
E[attr $=value]	匹配屬性attr的值以value結(jié)尾的元素
E[attr *=value]	匹配屬性attr的值包含value的元素

偽類選擇器

選擇器	含義
E:first-child	匹配元素E的第一個(gè)子元素
E:link	匹配所有未被點(diǎn)擊的鏈接
E:visited	匹配所有已被點(diǎn)擊的鏈接
E:active	匹配鼠標(biāo)已經(jīng)其上按下、還沒有釋放的E元素
E:hover	匹配鼠標(biāo)懸停其上的E元素
E:focus	匹配獲得當(dāng)前焦點(diǎn)的E元素
E:lang(c)	匹配lang屬性等于c的E元素
E:enabled	匹配表單中可用的元素
E:disabled	匹配表單中禁用的元素
E:checked	匹配表單中被選中的radio或checkbox元素
E::selection	匹配用戶當(dāng)前選中的元素
E:root	匹配文檔的根元素，對于html文檔，就是HTML元素
E:nth-child(n)	匹配其父元素的第n個(gè)子元素，第一個(gè)編號為1
E:nth-last-child(n)	匹配其父元素的倒數(shù)第n個(gè)子元素，第一個(gè)編號為1
E:nth-of-type(n)	與:nth-child()作用類似，但是僅匹配使用同種標(biāo)簽的元素
E:nth-last-of-type(n)	與:nth-last-child() 作用類似，但是僅匹配使用同種標(biāo)簽的元素
E:last-child	匹配父元素的最后一個(gè)子元素，等同于:nth-last-child(1)
E:first-of-type	匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素，等同于:nth-of-type(1)
E:last-of-type	匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素，等同于:nth-last-of-type(1)
Enly-child	匹配父元素下僅有的一個(gè)子元素，等同于:first-child:last-child或 :nth-child(1):nth-last-child(1)
Enly-of-type	匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素，等同于:first-of-type:last-of-type或 :nth-of-type(1):nth-last-of-type(1)
E:empty	匹配一個(gè)不包含任何子元素的元素，文本節(jié)點(diǎn)也被看作子元素
E:not(selector)	匹配不符合當(dāng)前選擇器的任何元素

偽元素選擇器

選擇器	含義
E:first-line	匹配E元素內(nèi)容的第一行
E:first-letter	匹配E元素內(nèi)容的第一個(gè)字母
E:before	在E元素之前插入生成的內(nèi)容
E:after	在E元素之后插入生成的內(nèi)容

道勤主機(jī)提供365天*24小時(shí)全年全天無休、實(shí)時(shí)在線、零等待的售后技術(shù)支持。竭力為您免費(fèi)處理您在使用道勤主機(jī)過程中所遇到的一切問題! 如果您是道勤主機(jī)用戶，那么您可以通過QQ【792472177】、售后QQ【59133755】、旺旺【詮釋意念】、微信：q792472177免費(fèi)電話、后臺提交工單這些方式聯(lián)系道勤主機(jī)客服！ 如果您不是我們的客戶也沒問題，點(diǎn)擊頁面最右邊的企業(yè)QQ在線咨詢圖標(biāo)聯(lián)系我們并購買后，我們?yōu)槟�免費(fèi)進(jìn)行無縫搬家服務(wù)，讓您享受網(wǎng)站零訪問延遲的遷移到道勤主機(jī)的服務(wù)！