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

1、元素選擇器

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

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

2、關系選擇器

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

ul li {margin-bottom:0.5em;}

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

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

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結尾的任何元素E：

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

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

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

4、偽類

:link：未訪問的鏈接；

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

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

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

:focus：獲得焦點時狀態，不僅限于鏈接，可用于任何具有tabindex屬性的無線：

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

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

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

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

input:disabled {background:#eee;}

:target：該選擇器定位當前活動頁面內定位點的目標元素：

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

:default：應用于一個或多個作為一組類似元素中的默認元素的UI元素；

:valid：應用于有效元素：

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

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

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

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

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

:required：應用于具有必填屬性required的表單控件；

ptional：應用于沒有必填屬性required的所有表單控件

:read-only：應用于其內容無法供用戶修改的元素；

:read-write：應用于其內容可供用戶修改的元素，比如輸入框；

: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的倒數第n個子元素的元素F；

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

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

.class p:nth-child(2) 與 .class p:nth-of-type(2) 的區別在于，如果.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 可以使用數字靜態式，比如 .nth-child(2n+1) 將匹配第1、3、5...個元素

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

E:last-child：父元素的倒數第一個子元素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：沒有子元素的元素，沒有子元素包括文本節點；

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

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

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

5、偽元素

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

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

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

::before 與 ::after ：使用 contnet 屬性生成額外的內容并插入在標記中：

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

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

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

當然，如果要方便的使用這些強大的

CSS選擇器

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

分享標題：CSS選擇器的使用詳細說明
標題路徑：http://www.js-pz168.com/news10/211060.html

成都網站建設公司_創新互聯，為您提供品牌網站制作、網站內鏈、域名注冊、網站排名、面包屑導航、小程序開發

廣告

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