詳解CSS3選擇器的使用方法匯總
一 通用選擇器
1 *{}通配選擇符(CSS2):適合所有元素對(duì)象。
2 E類(lèi)型(HTML)選擇符(CSS1):以文檔語(yǔ)言對(duì)象類(lèi)型DOM作為選擇符。
3 E#myid是id選擇符(CSS1):以唯一標(biāo)識(shí)符id屬性等于myid的E對(duì)象作為選擇符。
4 E.myclass是類(lèi)class選擇符(CSS1):以class屬性包含myclass的E對(duì)象作為選擇符。
5 E F:包含選擇符(CSS1):選擇所有被E元素包含的F元素。
CSS3新增的通用選擇器:同級(jí)元素通用選擇器:
1 通用選擇器E~F{}:匹配的是E元素之后的同級(jí)F元素匹配E后邊所有的F,EF同級(jí)。只要F在E的后邊,E只是作為一個(gè)參考。E~F { background:#ff0; }
2 臨近(相鄰)選擇器(css2):E+F{}:EF元素相鄰,即選擇緊貼在E元素之后F元素。
3 包含(子)選擇器(css2):E>F{}:EF不可以隔代,E只能匹配到下一個(gè)相鄰輩F。
二 屬性選擇器
1.E[att^="val"]:選擇具有att屬性且屬性值為以val開(kāi)頭的字符串的E元素。
2.E[att$="val"]:選擇具有att屬性且屬性值為以val結(jié)尾的字符串的E元素。
3.E[att*="val"]:選擇具有att屬性且屬性值為包含val的字符串的E元素。
4.E[att|="val"] 選擇具有att屬性且屬性值為以val開(kāi)頭并用連接符"-"分隔的字符串的E元素。
5.E[att] 選擇具有att屬性的E元素。
6.E[att="val"]選擇具有att屬性且屬性值等于val的E元素。
7.E[att~="val"]選擇具有att屬性且屬性值為一用空格分隔的字詞列表,其中一個(gè)等于val的E元素。
注:4~7是CSS2特有的屬性。 input最常用屬性選擇器。
三 偽類(lèi)選擇器
1 與用戶界面有關(guān)的偽類(lèi):
(1) E:enabled:匹配表單中激活的元素,表單中可操作的元素。
(2) E:disabled(常用):常用匹配表單中禁用的元素 disabled="disabled" 。 eg:input[type="text"]:disabled { background:#ddd;} 只可以看不可操作。
(3) E:checked:匹配表單中被選中的radio(單選框)或checkbox(復(fù)選框)元素
是整體偽類(lèi)(匹配整個(gè)DOM文檔):
(4) ::selection 匹配用戶當(dāng)前選中的元素,即設(shè)置對(duì)象被選擇時(shí)的顏色。 ::selection。
2 結(jié)構(gòu)性偽類(lèi)
1) :root 匹配文檔的根元素,對(duì)于HTML文檔,就是只能匹配HTML根元素。
2) E:nth-child(n) 匹配其當(dāng)前元素
E :nth-child(n):匹配其父元素E的第n個(gè)子元素,第一個(gè)編號(hào)為1
E F:nth-child(n):匹配其父元素E的第n個(gè)F元素,第一個(gè)編號(hào)為1(貌似只對(duì)ul 可用)
3) E:nth-last-child(n):匹配其父元素的倒數(shù)第n個(gè)子元素,第一個(gè)編號(hào)為1。
E:last-child:匹配父元素的最后一個(gè)子元素,等同于:nth-last-child(1)。
4) E :nth-of-type(n):與:nth-child(n)作用類(lèi)似,但是僅匹配使用同種標(biāo)簽的元素。
5) E :nth-last-of-type(n):與:nth-last-child(n) 作用類(lèi)似,但是僅匹配使用同種標(biāo)簽的元素 。
6) E :first-of-type :匹配父元素下使用同種標(biāo)簽的第一個(gè)子元素,等同于:nth-of-type(1) 。
7) E :last-of-type :匹配父元素下使用同種標(biāo)簽的最后一個(gè)子元素,等同于:nth-last-of-type(1)。
8) E :only-child:匹配父元素僅有的一個(gè)子元素。。
9) E:only-of-type:匹配父元素下使用同種標(biāo)簽的唯一一個(gè)子元素,等同于:first-of-type,:last-of-type或 :nth-of-type(1),:nth-last-of-type(1) 。
10) E :empty 匹配一個(gè)不包含任何子元素的元素,注意,文本節(jié)點(diǎn)也被看作子元素.,空白節(jié)點(diǎn)也被看做子節(jié)點(diǎn)。
11) E:not(s) 匹配不符合當(dāng)前選擇器的任何元素 :not(:nth-child(1))。
3
1) E:link{}:鏈接偽類(lèi)選擇器,設(shè)置超鏈接a在未被訪問(wèn)前的樣式。
2) E:visited{}:鏈接偽類(lèi)選擇器,設(shè)置超鏈接a在其鏈接地址已被訪問(wèn)過(guò)時(shí)的樣式。
3) E:hover{}:用戶操作偽類(lèi)選擇器,設(shè)置元素在其鼠標(biāo)懸停時(shí)的樣式。
4) E:active{}:用戶操作偽類(lèi)選擇器,設(shè)置元素在被用戶激活(在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件)時(shí)的樣式。
5) E:focus{}用戶操作偽類(lèi)選擇器,設(shè)置元素在成為輸入焦點(diǎn)(該元素的onfocus事件發(fā)生)時(shí)的樣式。
6) E:lang{}:偽類(lèi)選擇器,匹配使用特殊語(yǔ)言的E元素。
CSS3 選擇器
在 CSS 中,選擇器是一種模式,用于選擇需要添加樣式的元素。
"CSS" 列指示該屬性是在哪個(gè) CSS 版本中定義的。(CSS1、CSS2 還是 CSS3。)
| 選擇器 | 例子 | 例子描述 | CSS |
|---|---|---|---|
| .class | .intro | 選擇 class="intro" 的所有元素。 | 1 |
| #id | #firstname | 選擇 id="firstname" 的所有元素。 | 1 |
| * | * | 選擇所有元素。 | 2 |
| element | p | 選擇所有 <p> 元素。 | 1 |
| element,element | div,p | 選擇所有 <div> 元素和所有 <p> 元素。 | 1 |
| element element | div p | 選擇 <div> 元素內(nèi)部的所有 <p> 元素。 | 1 |
| element>element | div>p | 選擇父元素為 <div> 元素的所有 <p> 元素。 | 2 |
| element+element | div+p | 選擇緊接在 <div> 元素之后的所有 <p> 元素。 | 2 |
| [attribute] | [target] | 選擇帶有 target 屬性所有元素。 | 2 |
| [attribute=value] | [target=_blank] | 選擇 target="_blank" 的所有元素。 | 2 |
| [attribute~=value] | [title~=flower] | 選擇 title 屬性包含單詞 "flower" 的所有元素。 | 2 |
| [attribute|=value] | [lang|=en] | 選擇 lang 屬性值以 "en" 開(kāi)頭的所有元素。 | 2 |
| :link | a:link | 選擇所有未被訪問(wèn)的鏈接。 | 1 |
| :visited | a:visited | 選擇所有已被訪問(wèn)的鏈接。 | 1 |
| :active | a:active | 選擇活動(dòng)鏈接。 | 1 |
| :hover | a:hover | 選擇鼠標(biāo)指針位于其上的鏈接。 | 1 |
| :focus | input:focus | 選擇獲得焦點(diǎn)的 input 元素。 | 2 |
| :first-letter | p:first-letter | 選擇每個(gè) <p> 元素的首字母。 | 1 |
| :first-line | p:first-line | 選擇每個(gè) <p> 元素的首行。 | 1 |
| :first-child | p:first-child | 選擇屬于父元素的第一個(gè)子元素的每個(gè) <p> 元素。 | 2 |
| :before | p:before | 在每個(gè) <p> 元素的內(nèi)容之前插入內(nèi)容。 | 2 |
| :after | p:after | 在每個(gè) <p> 元素的內(nèi)容之后插入內(nèi)容。 | 2 |
| :lang(language) | p:lang(it) | 選擇帶有以 "it" 開(kāi)頭的 lang 屬性值的每個(gè) <p> 元素。 | 2 |
| element1~element2 | p~ul | 選擇前面有 <p> 元素的每個(gè) <ul> 元素。 | 3 |
| [attribute^=value] | a[src^="https"] | 選擇其 src 屬性值以 "https" 開(kāi)頭的每個(gè) <a> 元素。 | 3 |
| [attribute$=value] | a[src$=".pdf"] | 選擇其 src 屬性以 ".pdf" 結(jié)尾的所有 <a> 元素。 | 3 |
| [attribute*=value] | a[src*="abc"] | 選擇其 src 屬性中包含 "abc" 子串的每個(gè) <a> 元素。 | 3 |
| :first-of-type | p:first-of-type | 選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。 | 3 |
| :last-of-type | p:last-of-type | 選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素。 | 3 |
| :only-of-type | p:only-of-type | 選擇屬于其父元素唯一的 <p> 元素的每個(gè) <p> 元素。 | 3 |
| :only-child | p:only-child | 選擇屬于其父元素的唯一子元素的每個(gè) <p> 元素。 | 3 |
| :nth-child(n) | p:nth-child(2) | 選擇屬于其父元素的第二個(gè)子元素的每個(gè) <p> 元素。 | 3 |
| :nth-last-child(n) | p:nth-last-child(2) | 同上,從最后一個(gè)子元素開(kāi)始計(jì)數(shù)。 | 3 |
| :nth-of-type(n) | p:nth-of-type(2) | 選擇屬于其父元素第二個(gè) <p> 元素的每個(gè) <p> 元素。 | 3 |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是從最后一個(gè)子元素開(kāi)始計(jì)數(shù)。 | 3 |
| :last-child | p:last-child | 選擇屬于其父元素最后一個(gè)子元素每個(gè) <p> 元素。 | 3 |
| :root | :root | 選擇文檔的根元素。 | 3 |
| :empty | p:empty | 選擇沒(méi)有子元素的每個(gè) <p> 元素(包括文本節(jié)點(diǎn))。 | 3 |
| :target | #news:target | 選擇當(dāng)前活動(dòng)的 #news 元素。 | 3 |
| :enabled | input:enabled | 選擇每個(gè)啟用的 <input> 元素。 | 3 |
| :disabled | input:disabled | 選擇每個(gè)禁用的 <input> 元素 | 3 |
| :checked | input:checked | 選擇每個(gè)被選中的 <input> 元素。 | 3 |
| :not(selector) | :not(p) | 選擇非 <p> 元素的每個(gè)元素。 | 3 |
| ::selection | ::selection | 選擇被用戶選取的元素部分。 | 3 |
相關(guān)文章
CSS 屬性選擇器_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
對(duì)帶有指定屬性的 HTML 元素設(shè)置樣式??梢詾閾碛兄付▽傩缘?HTML 元素設(shè)置樣式,而不僅限于 class 和 id 屬性。下文給大家介紹了css屬性選擇器的相關(guān)知識(shí),感興趣的朋友一2017-06-22- 本文總結(jié)了30個(gè)CSS3選擇器,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-04-13
- 下面小編就為大家?guī)?lái)一篇全面了解css 屬性選擇器。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-07-20
- CSS3的諸多革命性改進(jìn)中,對(duì)屬性選擇器的增強(qiáng)絕對(duì)是亮點(diǎn)之一,這里我們就來(lái)詳解CSS3中屬性選擇器新增加的特性,需要的朋友可以參考下2016-07-11
CSS屬性簡(jiǎn)寫(xiě)和選擇器的優(yōu)先級(jí)問(wèn)題
這篇文章主要介紹了CSS屬性簡(jiǎn)寫(xiě)和選擇器的優(yōu)先級(jí)問(wèn)題,是CSS入門(mén)學(xué)習(xí)中的基礎(chǔ)知識(shí),需要的朋友可以參考下2015-08-15- 上一切在《CSS3選擇器——基本選擇器》中主要介紹了CSS3選擇器的第一部分,這節(jié)主要和大家一起來(lái)學(xué)習(xí)CSS3選擇器的第二部分——屬性選擇器2012-01-21
CSS屬性選擇器的四種格式-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
屬性選擇器(AttributeSelectors),或許你不應(yīng)該對(duì)屬性選擇器感到陌生,從本質(zhì)上說(shuō),id跟類(lèi)選擇器其實(shí)就是屬性選擇器,只不過(guò)是選擇了id或者類(lèi)的值(value)而已。2008-10-17css對(duì)邊框的屬性控制和鏈接的偽類(lèi)選擇器-CSS教程-網(wǎng)頁(yè)制作-網(wǎng)頁(yè)教學(xué)網(wǎng)
原文:http://jorux.com/archives/property-3-if-you-love-css/ 本篇主要介紹css對(duì)邊框(border)的屬性控制和鏈接(link)的偽類(lèi)選擇器. 邊框(border): css控制的邊框?qū)?/div> 2008-10-17CSS屬性選擇器非常神奇,它們可以幫你避免添加數(shù)不勝數(shù)的類(lèi)名,從另一方面來(lái)指出你代碼里的一些問(wèn)題。接下來(lái)通過(guò)本文給大家介紹使用CSS屬性選擇器來(lái)拼接HTML的DNA的方法,2018-11-02最新評(píng)論

