這篇文章主要講解了“css3高級選擇器的用法”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“css3高級選擇器的用法”吧！
css3屬性選擇器
css3之屬性選擇器，其中包括：
代碼如下:
1.[att=val]
2.[att*=val]
3.[att^=val]
4.[att$=val]
下面我將用實(shí)例演示它們的用法
css代碼：
代碼如下:
效果如圖1：
結(jié)構(gòu)性偽類選擇器
1.偽類選擇器
在講偽類選擇器之前，我先說下類選擇器，類選擇器的使用如下所示：
代碼如下:
偽類選擇器,大家看到這個術(shù)語不是很懂，樓主跟你們一樣，但是看到下面的示例，立馬知曉：
代碼如下:
看到這大家頓時知道了吧，在css中我們最常用的偽類選擇器是使用在a元素上。那么偽類選擇器與類選擇器額區(qū)別是,類選擇器可以隨便起名字如“p.right”，
“p.left”；但是偽類選擇器是css中已經(jīng)定義好的選擇器，不能隨便起名。
2.偽元素選擇器
偽元素選擇器是指并不是對真正的元素使用的選擇器，而是針對css中已經(jīng)定義好的偽元素使用的選擇器。
在css中有下面四個偽元素選擇器：
2.1.first-line偽元素選擇器(它用于某個元素中的第一行文字使用樣式，只能與塊級元素關(guān)聯(lián))
示例如下：
代碼如下:
This is a text.
That is a text.
2.2.first-letter偽元素選擇器(向文本的第一個字母添加特殊樣式,在 CSS2.1 之前，:first-letter 只能與塊級元素關(guān)聯(lián)。CSS2.1 擴(kuò)大了這個范圍，可以與任
何元素關(guān)聯(lián))
示例如下:
代碼如下:
This is a text.
2.3.before偽元素選擇器(在元素之前添加內(nèi)容)
這個偽元素允許創(chuàng)作人員在元素內(nèi)容的最前面插入生成內(nèi)容。默認(rèn)地，這個偽元素是行內(nèi)元素，不過可以使用屬性 display 改變這一點(diǎn).
示例如下:
代碼如下:
2.4.after偽元素選擇器(在元素之后添加內(nèi)容)
示例如下:
代碼如下:
3. 4個基本結(jié)構(gòu)性偽類選擇器
3.1.root選擇器（將樣式綁定到頁面的根元素中）
所謂根元素，是指位于文檔樹的最頂層結(jié)構(gòu)的元素，在html頁面上就是指包含整個頁面的“html”部分.
示例如下:
代碼如下:
ps:在使用樣式指定root元素與body元素的背景時，根據(jù)情況不同的指定條件，背景色的顯示范圍會有所變化，如上面的代碼不使用root選擇器來指定root元素
的背景色，只指定body元素的背景色，則整個頁面就變成紅色的了。
3.2.not選擇器(想對某個結(jié)構(gòu)使用樣式，但是想排除這個結(jié)構(gòu)元素下面的子結(jié)構(gòu)元素，讓它不使用這個樣式，就使用not選擇器)
示例如下:
代碼如下:
我是排除元素
3.3.empty選擇器(指定當(dāng)元素的內(nèi)容為空時使用樣式)
示例如下:
代碼如下:
| 1 | 2 | 3 |
| 4 | 5 |
3.4.target選擇器(使用target選擇器來對頁面中的某個target元素[該元素的id被當(dāng)作頁面的超鏈接類使用]指定樣式，該樣式只有在用戶點(diǎn)擊了頁面中的超鏈接
，并且跳轉(zhuǎn)到target元素后起作用)
示例如下:
代碼如下:
4. 下面接著說其它幾個選擇器
first-child,last-child,nth-child,nth-last-child這幾個選擇器能夠針對一個父元素中的第一個，最后一個，指定序號的子元素，甚至第偶數(shù)個，第奇數(shù)
個子元素進(jìn)行樣式指定。
4.1.first-child與last-child的運(yùn)用，first-child在ie7開始被支持，其它現(xiàn)代瀏覽器都支持
代碼如下:
4.2.nth-child(表示第幾個元素),運(yùn)用如下:
代碼如下:
4.3.nth-last-child(表示倒數(shù)第幾個元素),運(yùn)用如下:
代碼如下:
ps:nth-child與nth-last-child的序號是從1開始，當(dāng)然也可以是關(guān)鍵詞或公式。；除了對指定序號的子元素使用樣式以外，還可以對某個父元素中的所有第奇
數(shù)個子元素或第偶數(shù)個子元素使用樣式。
4.3.1 nth-child 對某個父元素中的所有第奇數(shù)個子元素的樣式設(shè)置
代碼如下:
4.3.2 nth-last-child 對某個父元素中的所有倒數(shù)上去的第偶數(shù)個子元素的樣式設(shè)置
代碼如下:
4.4.nth-of-type(匹配屬于父元素的特定類型的第 N 個子元素的每個元素)
4.5.nth-last-of-type(配屬于父元素的特定類型的第 N 個子元素的每個元素，從最后一個子元素開始計(jì)數(shù))
好，既然知道他們的用處，那我們直接看個列子：
代碼如下:
內(nèi)容一
內(nèi)容二
內(nèi)容三
5.only-child(匹配屬于其父元素的子元素的每個元素)
其實(shí)“:nth-child(1):nth-last-child(1)”的結(jié)合用法
代碼如下:
孩子一
孩子一
孩子二
孩子一
孩子二
孩子三
上面說了那么多的css選擇器的示例運(yùn)用，有這些選擇器可以大幅度的提高開發(fā)書寫或修改樣式表是的工作效率，我其實(shí)一直期待使用這些css選擇器，可惜有IE
感謝各位的閱讀，以上就是“css3高級選擇器的用法”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對css3高級選擇器的用法這一問題有了更深刻的體會，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識點(diǎn)的文章，歡迎關(guān)注！
重慶分公司
重慶分公司
