CSS選擇器的使用詳細(xì)說明

選擇器是CSS的核心，從最初的元素、class/id選擇器，演進(jìn)到偽元素、偽類，以及CSS3中提供的更豐富的選擇器，定位頁面上的任意元素開始變得愈發(fā)的簡單。

1、元素選擇器

這是最基本的CSS選擇器，HTML文檔中的元素本身就是一個選擇器：

p {line-height:1.5em; margin-bottom:1em;}

2、關(guān)系選擇器

E F：后代選擇器，該選擇器定位元素E的后代中所有元素F：

ul li {margin-bottom:0.5em;}

E F：子選擇器，該選擇器定位元素E的直接子元素中的所有元素F，它將忽略任何進(jìn)一步的嵌套： ul li {list-style:none;} //僅限ul的直接子元素li，如果li里面還嵌套著另一個 ul 結(jié)構(gòu)時，最里面的 li 將被忽略>E + F：相鄰兄弟選擇器，該選擇器定位與元素E具有相同父元素且在標(biāo)記中緊鄰E的元素F： li + li {border-top:1px solid #ddd;} //定位具有相同父元素ul里除第一個li之外的所有l(wèi)i

E ~ F：一般兄弟選擇器，該選擇器定位與元素E具有相同父元素且在標(biāo)記中位于E之后的所有元素F：>h1 ~ p {color:#f00;} //定位具有相同父元素的，h1標(biāo)簽之后的所有p標(biāo)簽

3、屬性選擇器

E[attr]：該選擇器定位具有屬性attr的任何元素E：

input[required] {border:1px solid #f00;} //定位頁面里所有具有必填屬性"required"的input

E[attr=val]：該選擇器定位具有屬性attr且屬性值為val的任何元素E：

input[type=password] {border:1px solid #aaa;} //定位頁面里的密碼輸入框

E[attr|=avl]：該選擇器定位具有屬性attr且屬性值為val或以val-開始的任何元素E：

p[class|=a] {color:#333;} //定位頁面里所有的P段落里具有class屬性且屬性值為a或是a-開始的，比如class="a"以及class="a-b"

E[attr~=val]：該選擇器定位具有屬性attr且屬性值為完整單詞 val 的任何元素E：

div[title~=english] {color:#f88;} //定位頁面里所有具有屬性title且屬性值里擁有完整單詞english的div容器，比如title="english"以及title="a english"

E[attr^=val]：該選擇器定位具有屬性attr且屬性值以val開頭的任何元素E：

div[class^=a] {color:#666;} //定位頁面里具有屬性class且屬性值以a開頭的div容器，比如class="a"以及class="ab"

E[attr$=val]：該選擇器與E[attr^=val]正好相反，定位具有屬性attr且屬性值以val結(jié)尾的任何元素E：

div[class$=a] {color:#f00;} //定位頁面里具有屬性class且屬性值以a結(jié)尾的div窗口，比如class="nba"以及class="cba"

E[attr*=val]：該選擇器與E[attr~=val]相似，但更進(jìn)一步，定位具有屬性attr且屬性值任意位置包含val的元素E，val可以是一個完整的單詞，也可以是一個單詞中的一部分：

a[title*=link] {text-decoration:underline;} //定位所有title里具有l(wèi)ink字符串的a鏈接

4、偽類

:link：未訪問的鏈接；

:visited：已訪問的鏈接，不建議使用；

:hover：鼠標(biāo)移動到容器，不僅限于鏈接，可用于頁面中的任何元素；

:active：被激活時的狀態(tài)，不僅限于鏈接，可用于任何具有tabindex屬性的元素；

:focus：獲得焦點(diǎn)時狀態(tài)，不僅限于鏈接，可用于任何具有tabindex屬性的無線：

input:focus {border:1px solid #333;} //輸入框獲得焦點(diǎn)時的樣式

:enabled：已啟用的界面元素：

input:enabled {border:1px solid #899;}

:disabled：已禁用的界面元素：

input:disabled {background:#eee;}

:target：該選擇器定位當(dāng)前活動頁面內(nèi)定位點(diǎn)的目標(biāo)元素：

#info:target {font-size:24px;} //當(dāng)訪問的URL網(wǎng)址為 123.html#info 時，id="info"將加載這個字體樣式

:default：應(yīng)用于一個或多個作為一組類似元素中的默認(rèn)元素的UI元素；

:valid：應(yīng)用于有效元素：

input:valid {border:1px solid #6a6;} //當(dāng)輸入框驗證為有效時加載這個邊框樣式，基于type或pattern屬性

:invalid：應(yīng)用于空的必填元素，以及未能與type或pattern屬性所定義的需求相匹配的元素：

input:invalid {border:1px solid #f00;} //當(dāng)輸入框為空且必填時，或已填寫但驗證無效時，加載此邊框樣式

:in-range：應(yīng)用于具有范圍限制的元素，其中該值位于限制內(nèi)；比如具有min和max屬性的number和range輸入框；

ut-of-range：與:in-range選擇相反，其中該值在限制范圍外；

:required：應(yīng)用于具有必填屬性required的表單控件；

ptional：應(yīng)用于沒有必填屬性required的所有表單控件

:read-only：應(yīng)用于其內(nèi)容無法供用戶修改的元素；

:read-write：應(yīng)用于其內(nèi)容可供用戶修改的元素，比如輸入框；

:root：根元素，始終指html元素；

E F:nth-child(n)：該選擇器定位元素E的第n個子元素的元素F：

div.class p:nth-child(3) {color:#f00;} //class="class"的div容器里的第3個元素p，如果第3個子元素不是p，此樣式將失效

E F:nth-last-child(n)：該選擇器定位元素E的倒數(shù)第n個子元素的元素F；

E:nth-of-type(n)：該選擇器定位元素E的第n個指定類型子元素；

E:nth-lash-of-type(n)：該選擇器定位元素E的導(dǎo)數(shù)第n個指定類型子元素：

.class p:nth-child(2) 與 .class p:nth-of-type(2) 的區(qū)別在于，如果.class里的第2個子元素不是P元素時，.class p:nth-child(2) 的樣式將無效，而.class p:nth-of-type(2) 將定位在 .class 里的第2個p元素

nth-child(n)、nth-last-child(n)、nth-of-type(n)、nth-last-of-type(n)，這其中的 n 可以使用數(shù)字靜態(tài)式，比如 .nth-child(2n+1) 將匹配第1、3、5...個元素

E:first-child：父元素的第一個子元素E，與:nth-child(1)相同；

E:last-child：父元素的倒數(shù)第一個子元素E；

E:first-of-type：與:nth-of-type(1)相同；

E:last-of-type：與:nth-last-of-type(1)相同；

E:only-child：父元素中唯一的子元素E；

E:only-of-type：父元素中唯一具有該類型的元素E；

E:empty：沒有子元素的元素，沒有子元素包括文本節(jié)點(diǎn)；

E:lang(en)：具有使用雙字母縮寫(en)表示的語言的元素；

E:not(exception)：該選擇器將選擇與括號內(nèi)的選擇器不匹配的元素：

p:not(.info) {font-size:12px;} //匹配所有class值不為info的p元素

5、偽元素

偽元素可用于定位文檔中包含的文本，為與偽類進(jìn)行區(qū)分，偽元素使用雙冒號 :: 定義，但單冒號 : 也能被識別。

::first-line：匹配文本首行；

::first-letter：匹配文本首字母；

::before 與 ::after ：使用 contnet 屬性生成額外的內(nèi)容并插入在標(biāo)記中：

a[href^=http]::after {content:"link"} //在頁面的a鏈接的后面插入文字link

::selection：匹配突出顯示的文本：

::selection {background:#444; color:#fff;} //定義選中的文本顏色與背景色

當(dāng)然，如果要方便的使用這些強(qiáng)大的

CSS選擇器

的話，使用Chrome、Firefox之類的瀏覽器吧，最起碼得拋棄IE9以下的IE版本瀏覽器吧。

分享標(biāo)題：CSS選擇器的使用詳細(xì)說明
標(biāo)題路徑：http://muchs.cn/news10/211060.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、網(wǎng)站內(nèi)鏈、域名注冊、網(wǎng)站排名、面包屑導(dǎo)航、小程序開發(fā)

廣告

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