CSS3選擇器的使用方法介紹-創(chuàng)新互聯(lián)

這篇文章主要講解了“CSS3選擇器的使用方法介紹”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“CSS3選擇器的使用方法介紹”吧！

創(chuàng)新互聯(lián)公司是創(chuàng)新、創(chuàng)意、研發(fā)型一體的綜合型網(wǎng)站建設(shè)公司，自成立以來(lái)公司不斷探索創(chuàng)新，始終堅(jiān)持為客戶(hù)提供滿(mǎn)意周到的服務(wù)，在本地打下了良好的口碑，在過(guò)去的十年時(shí)間我們累計(jì)服務(wù)了上千家以及全國(guó)政企客戶(hù)，如成都房屋鑒定等企業(yè)單位，完善的項(xiàng)目管理流程，嚴(yán)格把控項(xiàng)目進(jìn)度與質(zhì)量監(jiān)控加上過(guò)硬的技術(shù)實(shí)力獲得客戶(hù)的一致稱(chēng)譽(yù)。

一 通用選擇器
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 與用戶(hù)界面有關(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 匹配用戶(hù)當(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在未被訪(fǎng)問(wèn)前的樣式。
2) E:visited{}：鏈接偽類(lèi)選擇器，設(shè)置超鏈接a在其鏈接地址已被訪(fǎng)問(wèn)過(guò)時(shí)的樣式。
3) E:hover{}：用戶(hù)操作偽類(lèi)選擇器，設(shè)置元素在其鼠標(biāo)懸停時(shí)的樣式。
4) E:active{}：用戶(hù)操作偽類(lèi)選擇器，設(shè)置元素在被用戶(hù)激活（在鼠標(biāo)點(diǎn)擊與釋放之間發(fā)生的事件）時(shí)的樣式。
5) E:focus{}用戶(hù)操作偽類(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
elementp選擇所有 <p> 元素。1
element,elementdiv,p選擇所有 <div> 元素和所有 <p> 元素。1
element elementdiv p選擇 <div> 元素內(nèi)部的所有 <p> 元素。1
element>elementdiv>p選擇父元素為 <div> 元素的所有 <p> 元素。2
element+elementdiv+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
:linka:link選擇所有未被訪(fǎng)問(wèn)的鏈接。1
:visiteda:visited選擇所有已被訪(fǎng)問(wèn)的鏈接。1
:activea:active選擇活動(dòng)鏈接。1
:hovera:hover選擇鼠標(biāo)指針位于其上的鏈接。1
:focusinput:focus選擇獲得焦點(diǎn)的 input 元素。2
:first-letterp:first-letter選擇每個(gè) <p> 元素的首字母。1
:first-linep:first-line選擇每個(gè) <p> 元素的首行。1
:first-childp:first-child選擇屬于父元素的第一個(gè)子元素的每個(gè) <p> 元素。2
:beforep:before在每個(gè) <p> 元素的內(nèi)容之前插入內(nèi)容。2
:afterp:after在每個(gè) <p> 元素的內(nèi)容之后插入內(nèi)容。2
:lang(language)p:lang(it)選擇帶有以 "it" 開(kāi)頭的 lang 屬性值的每個(gè) <p> 元素。2
element1~element2p~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-typep:first-of-type選擇屬于其父元素的首個(gè) <p> 元素的每個(gè) <p> 元素。3
:last-of-typep:last-of-type選擇屬于其父元素的最后 <p> 元素的每個(gè) <p> 元素。3
:only-of-typep:only-of-type選擇屬于其父元素的 <p> 元素的每個(gè) <p> 元素。3
:only-childp: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-childp:last-child選擇屬于其父元素最后一個(gè)子元素每個(gè) <p> 元素。3
:root:root選擇文檔的根元素。3
:emptyp:empty選擇沒(méi)有子元素的每個(gè) <p> 元素（包括文本節(jié)點(diǎn)）。3
:target#news:target選擇當(dāng)前活動(dòng)的 #news 元素。3
:enabledinput:enabled選擇每個(gè)啟用的 <input> 元素。3
:disabledinput:disabled選擇每個(gè)禁用的 <input> 元素3
:checkedinput:checked選擇每個(gè)被選中的 <input> 元素。3
:not(selector):not(p)選擇非 <p> 元素的每個(gè)元素。3
::selection::selection選擇被用戶(hù)選取的元素部分。3

感謝各位的閱讀，以上就是“CSS3選擇器的使用方法介紹”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)CSS3選擇器的使用方法介紹這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

名稱(chēng)欄目：CSS3選擇器的使用方法介紹-創(chuàng)新互聯(lián)
文章地址：http://muchs.cn/article30/dgejpo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、虛擬主機(jī)、網(wǎng)站改版、外貿(mào)網(wǎng)站建設(shè)、小程序開(kāi)發(fā)、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化