CSS選擇器詳解

時間  2019-11-17
標籤 css 選擇器 詳解 欄目 CSS 简体版
原文   原文鏈接

元素選擇器

通配選擇器

* { sRules }

選定文檔全部的元素css

/** 設置全部元素爲紅色 **/
* {
　　color: red;  
}
<div>我是div</div>
<p>我是p</p>

類型選擇器

E { sRules }

選定指定的文檔元素 Ehtml

/** 設置元素p爲紅色 **/
p {
　　color: red;  
}
<p>我是p</p>

類選擇器

E.myclass { sRules }

選定 class 屬性包含 myclass 的文檔元素 Ecss3

/** 設置 calss="myclass" 的元素爲紅色 **/
.myClass {
　　color: red
}
<div class="myclass">我是div</div>

多類選擇器

E.myclass.myotherclass { sRules }

選定 class 屬性包含 myclass 以及 myotherclass 的文檔元素 Eweb

/** 設置 calss="myclass myotherclass" 的元素爲紅色 **/
.myClass.myotherclass {
　　color: red
}
<div class="myclass myotherclass">我是div</div>

ID選擇器

E#myid { sRules }

選定 id 屬性值爲 myid 的文檔元素 E瀏覽器

/** 設置 id="myid" 的元素爲紅色 **/
#myid {
　　color: red;
}
<div id="myid">我是div</div>

屬性選擇器

根據簡單屬性選擇

E[attr] { sRules }

選定具備屬性 attr 的文檔元素 Espa

/** 設置有屬性 id 的元素爲紅色 **/
div[id] {
　　color: red;
}
<div id="myid">我是div</div>

根據具體屬性值選擇

E[attr="val"] { sRules }

選定具備屬性 attr 且屬性值等於 val 的文檔元素 E設計

/** 設置有屬性 id 且值等於 "myid" 的元素爲紅色 **/
div[id="myid"] {
　　color: red;
}

/** 多個屬性-值 **/
input[type="text"][class="text1"] {
　　width: 20px;
}
<div id="myid">我是div</div>
<input type="text" class="text1" />

根據部分屬性值選擇

E[attr~="val"] { sRules }

選定具備屬性 attr 且屬性值爲用空格分隔的字詞列表，其中有一個等於 val （包含只有一個值且該值等於 val 的狀況）的文檔元素 Ecode

/** 設置 class 屬性有一個值爲 div1 的元素爲紅色 **/
div[class~="div1"] {
　　color: red;
}
<div calss="div1">我是div</div>
<div class="div1 header">我是div</div>

E[attr^="val"] { sRules }

選定具備屬性 attr 且屬性值以 val 開頭的字符串的文檔元素 Ehtm

/** 設置 class 屬性的值以 head 開頭的元素爲紅色 **/
div[class^="head"] {
　　color: red;
}
<div calss="headClass">我是div</div>

E[attr$="val"] { sRules }

選定具備屬性 attr 且屬性值以 val 結尾的字符串的文檔元素 E對象

/** 設置 class 屬性的值以 Class 結尾的元素爲紅色 **/
div[class$="Class"] {
　　color: red;
}
<div calss="headClass">我是div</div>

E[attr*="val"] { sRules }

選定具備屬性 attr 且屬性值包含 val 的字符串的文檔元素 E

/** 設置 class 屬性的值包含 Div 的元素爲紅色 **/
div[class*="Div"] {
　　color: red;
}
<div calss="headDivClass">我是div</div>

E[attr|="val"] { sRules }

選定具備屬性 attr 且屬性值以 val 開頭並用鏈接符 "-" 分隔的字符串（包含屬性值只有 val 的狀況）的文檔元素 E

/** 設置 class 屬性的值以 head 開頭並用鏈接符 "-" 分隔的元素爲紅色 **/
div[class|="head"] {
　　color: red;
}
<div calss="head-class">我是div</div>

關係選擇器

後代選擇器

E F { sRules }

選定文檔元素 E 全部的後代元素 F，包含全部子孫

/* 設置 div 後代全部的 p 爲紅色 */
div p {
　　color: red;
}
<div>
　　<p>我是段落1</p>
　　<div>
　　　　<p>我是段落2</p>
　　</div>
</div>

子代選擇器

E>F { sRules }

選定文檔元素 E 全部的子代元素 F，不包含孫代元素

/* 設置 div 子代的 p 爲紅色，但孫代的 p 不爲紅色 */
div>p {
　　color: red;
}
<div>
　　<p>我是段落1</p>
　　<div>
　　　　<p>我是段落2</p>
　　</div>
</div>

相鄰選擇器

E+F { sRules }

選定文檔元素 E 以後且同屬一個父元素的相鄰兄弟元素 F

/* 設置 h1 相鄰的 p 爲紅色，但第二個 p 不爲紅色 */
h1>p {
　　color: red;
}
<div>
　　<h1>我是h1</h1>
　　<p>我是段落1</p>
　　<p>我是段落2</p>
</div>

兄弟選擇器

E~F { sRules } CSS3

選定文檔元素 E 以後且同屬一個父元素的兄弟元素 F

/* 設置 h1 以後全部的 p 爲紅色 */
h1>p {
　　color: red;
}
<div>
　　<h1>我是h1</h1>
　　<p>我是段落1</p>
　　<p>我是段落2</p>
</div>

僞類選擇器

設置超連接 a 未被訪問前的樣式

a:link {
　　color: blue;
}
<a href="http://i.cnblogs.com"></a>

:visited

a:visited { sRules }

設置超連接 a 已經被訪問後的樣式

a:link {
　　color: red;
}
<a href="http://i.cnblogs.com"></a>

:focus

E:focus { sRules }

設置元素 E 在成爲輸入焦點（該元素的 onfocus 事件發生）時的樣式

a:focus {
　　color: black;
}
<a href="http://i.cnblogs.com"></a>

:hover

E:hover { sRules }

設置元素E在鼠標懸停時的樣式

a:hover {
　　color: red;
}
<a href="http://i.cnblogs.com"></a>

:active

E:active { sRules }

設置元素E在被用戶激活（在鼠標點擊與釋放之間發生的事件）時的樣式

a:active{
　　color: green;
}
<a href="http://i.cnblogs.com"></a>

以上五種僞類選擇器同時用在a超連接時，各僞類需按特定的順序書寫才能生效，保證各瀏覽器具備相同的表現。正確的順序爲：link - visited - focus - hover - active

:lang(lang)

E:lang(lang) { sRules }

選定使用特殊語言的元素E

p:lang(zh-cn) {
    color: #f00;
}
p:lang(en) {
    color: #090;
}
<p lang="zh-cn">我是中文</p>
<p lang="en">i am English</p>

:not(s) CSS3

E:not(s) { sRules }

匹配不含有s選擇符的元素E

/** 除最後一個li以外，全部li加一條底邊線 **/
li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

:root CSS3

:root { sRules }

匹配當前文檔的根元素。在HTML中，根元素永遠是HTML

/** :root 至關於 html **/
:root {
    color: red;
}

:first-child

E:first-child { sRules }

匹配父元素的第一個子元素 E。要使該屬性生效，E 元素必須是某個元素的子元素，E 的父元素最高是 body，即 E 能夠是 body 的子元素

最重要的是： E 必須是它的兄弟元素中的第一個元素，換言之，E 必須是父元素的第一個子元素。與之相似的僞類還有 E:last-child，只不過狀況正好相反，須要它是最後一個子元素。

/** 給第一個 li 加一條底邊線 **/
li:first-child {
    border-bottom: 1px solid #ddd;
}

/** 本意是想設置第一個 p 元素爲紅色，但這裏無效，由於 p 不是 div 的第一個子元素（第一個子元素是 h2 ） **/
p:first-child {
    color: red;
}
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<div>
    <h2>我是一個標題</h2>
    <p>我是一個p</p>
</div>

:last-child CSS3

E:last-child { sRules }

匹配父元素的最後一個子元素E。要使該屬性生效，E 元素必須是某個元素的子元素，E 的父元素最高是 body，即 E 能夠是 body 的子元素

最重要的是： E 必須是它的兄弟元素中的最後一個元素，換言之，E 必須是父元素的最後一個子元素。與之相似的僞類還有 E:first-child，只不過狀況正好相反，須要它是第一個子元素。

/** 給最後一個 li 加一條底邊線 **/
li:last-child {
    border-bottom: 1px solid #ddd;
}

/** 本意是想設置最後一個 h2 元素爲紅色，但這裏無效，由於 h2 不是 div 的最後一個子元素（最後一個子元素是 p ） **/
p:first-child {
    color: red;
}
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
<div>
    <h2>我是一個標題</h2>
    <p>我是一個p</p>
</div>

:only-child CSS3

E:only-child { sRules }

匹配父元素僅有的一個子元素 E。要使該屬性生效，E 元素必須是某個元素的子元素，E 的父元素最高是 body，即 E 能夠是 body 的子元素

/** 該規則當元素中只有一個 li 有效，便可設置 li 爲紅色，若是有多個 li 則無效。**/
li:only-child {
    color: red;
}
<ul>
    <li>li:only-child對我有效，我會變紅色</li>
</ul>
<ul>
    <li>li:only-child對我無效，我不會變紅色</li>
    <li>li:only-child對我無效，我不會變紅色</li>
    <li>li:only-child對我無效，我不會變紅色</li>
</ul>

:nth-child(n) CSS3

E:nth-child(n) { sRules }

要使該屬性生效，E 元素必須是某個元素的子元素，E 的父元素最高是 body，即 E 能夠是 body 的子元素

匹配父元素的第 n 個子元素 E，假設該子元素不是 E，則選擇符無效，但 n 會累加

<style>
    /* 第二個 p 會被設置成紅色，由於它是父元素的第二個元素 */
    p:nth-child(2) {
        color: red;
    }
    
    /* 第三個 p 不會設置成紅色，由於父元素的第三個元素不是 p，而是 span */
    p:nth-child(3) {
        color: red;
    }
    
    /* 第三個 p 會被設置成紅色，由於它是父元素的第四個元素 */
    p:nth-child(4) {
        color: red;
    }
</style>

<div>
    <p>第1個p</p>
    <p>第2個p</p>
    <span>第1個span</span>
    <p>第3個p</p>
    <span>第2個span</span>
    <p>第4個p</p>
    <p>第5個p</p>
</div>

該選擇符容許使用一個 乘法因子(n) 來做爲換算方式，好比咱們想選中全部的偶數子元素 E，那麼選擇符能夠寫成：E:nth-child(2n)，也可使用一些關鍵字，好比：odd, even。E:nth-child(even) 選擇偶數子元素，E:nth-child(old) 選擇奇數子元素

<style>
    /* 偶數 或者 E:nth-child(even) */
    li:nth-child(2n) {
        color: red;
    }
    
    /* 奇數 或者 ，E:nth-child(old) */
    li:nth-child(2n+1) {
        color: blue;
    }
</style>

<ul>
    <li>列表項一</li>
    <li>列表項二</li>
    <li>列表項三</li>
    <li>列表項四</li>
</ul>

:nth-last-child(n) CSS3

E:nth-last-child(n) { sRules }

要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是body，即E能夠是body的子元素

該選擇符容許使用一個乘法因子(n)來做爲換算方式，好比咱們想選中倒數第一個子元素E，那麼選擇符能夠寫成：E:nth-last-child(1)

匹配父元素的倒數第n個子元素E，假設該子元素不是E，則選擇符無效

<style>
    /* 設置倒數第一個 p 爲紅色，由於該 p 元素是父元素的倒數第二元素 */
    p:nth-last-child(2) {
        color: red;
    }
</style>

<div>
    <p>第1個p</p>
    <p>第2個p</p>
    <span>第1個span</span>
    <p>第3個p</p>
    <span>第2個span</span>
</div>

:first-of-type CSS3

E:first-of-type { sRules }

匹配同類型中的第一個同級兄弟元素E

要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是html，即E能夠是html的子元素，也就是說E能夠是body

該選擇符老是能命中父元素的第1個爲E的子元素，不論第1個子元素是否爲E

<style>
    /* 設置第一個元素類型爲 p 的元素爲紅色，儘管該 p 元素不是父元素的第一個元素 */
    p:first-of-type {
        color: red;
    }
</style>

<div>
    <div>我是一個div元素</div>
    <p>我是一個p元素</p>
    <p>我是一個p元素</p>
</div>

:last-of-type CSS3

E:last-of-type { sRules }

匹配同類型中的最後一個同級兄弟元素E

要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是html，即E能夠是html的子元素，也就是說E能夠是body

該選擇符老是能命中父元素的倒數第1個爲E的子元素，不論卻是第1個子元素是否爲E

<style>
    /* 設置倒數一個元素類型爲 p 的元素爲紅色，儘管該 p 元素不是父元素的倒數第一個元素 */
    p:first-of-type {
        color: red;
    }
</style>

<div>
    <p>我是一個p元素</p>
    <p>我是一個p元素</p>
    <div>我是一個div元素</div>
</div>

:only-of-type CSS3

E:only-of-type { sRules }

匹配同類型中的惟一的一個同級兄弟元素E

要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是html，即E能夠是html的子元素，也就是說E能夠是body

該選擇符老是能命中父元素的惟一同類型子元素E，不論該元素的位置

<style>
    /* 設置父元素中惟一的 p 元素爲紅色，有多個 p 元素無效 */
    p:only-of-type {
        color: red;
    }
</style>

<div>
    <p>p:only-of-type對我有效，我會變紅色</p>
</div>
<div>
    <p>p:only-of-type對我無效，我不會變紅色</p>
    <p>p:only-of-type對我無效，我不會變紅色</p>
</div>

:nth-of-type(n) CSS3

E:nth-of-type(n) { sRules }

匹配同類型中的第n個同級兄弟元素E

要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是html，即E能夠是html的子元素，也就是說E能夠是body

該選擇符老是能命中父元素的第n個爲E的子元素，不論第n個子元素是否爲E

<style>
    /* 設置父元素第二個 p 元素爲紅色，雖然該 p 元素爲父元素的第三個元素 */
    p:nth-of-type(2) {
        color: red;
    }
</style>

<div class="test">
    <p>我是一個p元素</p>
    <div>我是一個div元素</div>
    <p>我是一個p元素</p>
    <p>我是一個p元素</p>
</div>

:nth-last-of-type(n) CSS3

E:nth-last-of-type(n) { sRules }

匹配同類型中的倒數第n個同級兄弟元素E

要使該屬性生效，E元素必須是某個元素的子元素，E的父元素最高是html，即E能夠是html的子元素，也就是說E能夠是body

該選擇符老是能命中父元素的倒數第n個爲E的子元素，不論倒數第n個子元素是否爲E

<style>
    p:nth-last-of-type(1) {
        color: red;
    }
</style>

<div class="test">
    <p>我是一個p元素</p>
    <div>我是一個div元素</div>
    <p>我是一個p元素</p>
    <p>我是一個p元素</p>
</div>

:empty CSS3

E:empty { sRules }

匹配沒有任何子元素（包括text節點）的元素E

<style>
    p:empty {
        height: 25px;
        border: 1px solid #ddd;
        background: #eee;
    }
</style>

<div>
    <p>結構性僞類選擇符 E:empty</p>
    <p><!--我是一個空節點p，請注意我與其它非空節點p的外觀有什麼不同--></p>
    <p>結構性僞類選擇符 E:empty</p>
</div>

:checked CSS3

E:checked { sRules }

匹配用戶界面上處於選中狀態的元素E。(用於input type爲radio與checkbox時)

<style>
    input:checked + span {
        background: red;
    }
</style>

<input type="radio" />
<span>紅色</span>

:enabled CSS3

E:enabled { sRules }

匹配用戶界面上處於可用狀態的元素E

<style>
    input[type="text"]:enabled {
        border: 1px solid #090;
        background: #fff;
        color: #000;
    }
    
    input[type="text"]:disabled {
        border: 1px solid #ccc;
        background: #eee;
        color: #ccc;
    }
</style>

<input type="text" value="可用狀態" />
<input type="text" value="禁用狀態" disabled="disabled" />

:disabled CSS3

E:disabled { sRules }

匹配用戶界面上處於禁用狀態的元素E

<style>
    input[type="text"]:enabled {
        border: 1px solid #090;
        background: #fff;
        color: #000;
    }
    
    input[type="text"]:disabled {
        border: 1px solid #ccc;
        background: #eee;
        color: #ccc;
    }
</style>

<input type="text" value="可用狀態" />
<input type="text" value="禁用狀態" disabled="disabled" />

:target CSS3

E:target { sRules }

匹配相關URL指向的E元素

解釋： URL後面跟錨點#，指向文檔內某個具體的元素。這個被連接的元素就是目標元素(target element)，:target選擇器用於選取當前活動的目標元素

<!-- 假設上述代碼在頁面 a.html 中，那麼當訪問 a.html#demo 時，這個div元素將會被:target命中 -->
<style>
    #demo:target {
        color: red;
    }
</style>

<div id="demo">
    <p>E:target僞類使用方法</p>
</div>

@page相關選擇器

@page :first { sRules }

設置在打印時頁面容器第一頁使用的樣式。僅用於@page規則

該僞類選擇符只容許定義margin, orphans, widows 和 page breaks相關屬性

@page :left { sRules }

設置頁面容器位於裝訂線左邊的全部頁面使用的樣式。僅用於@page規則

該僞類選擇符只容許定義margin, padding, border 和 background屬性

@page :right { sRules }

設置頁面容器位於裝訂線右邊的全部頁面使用的樣式。僅用於@page規則

該僞類選擇符只容許定義margin, padding, border 和 background屬性

僞對象選擇器

::first-letter CSS3

E::first-letter { sRules }

設置對象內的第一個字符的樣式

此僞對象僅做用於塊對象。內聯對象要使用該僞對象，必須先將其設置爲塊級對象

該僞對象常被用來配合font-size屬性和float屬性製做首字下沉效果

<style>
    p::first-letter {
        float:left;
        font-size:40px;
        font-weight:bold;
        line-height:1;
    }
</style>

<h1>雜誌經常使用的首字下沉效果</h1>
<p>今天，陽光明媚，晴空萬里，很是適合戶外活動，如踏青、遠足之類的。長期坐在辦公室的同窗們要多注意運動。</p>

::first-line CSS3

E::first-line { sRules }

設置對象內的第一行的樣式

此僞對象僅做用於塊對象。內聯對象要使用該僞對象，必須先將其設置爲塊級對象

<style>
    p::first-line {
        color:#090;
    }
</style>

<h1>第一行文字的顏色與其它不一樣</h1>
<p>今天，陽光明媚，晴空萬里，很是適合戶外活動，如踏青、遠足之類的。長期坐在辦公室的同窗們要多注意運動。</p>

::before CSS3

E::before { sRules }

設置在對象前（依據對象樹的邏輯結構）發生的內容。用來和content屬性一塊兒使用，而且必須定義content屬性

<style>
    p::before {
        position: absolute;
        left: 0;
        background: #fff;
        color: #000;
        content: "在 p 元素中 span 元素以前可看到這段文字";
        font-size:14px;
    }
</style>

<p>
    <span>我是一個span</span>
</p>

::after CSS3

E::after { sRules }

設置在對象前（依據對象樹的邏輯結構）發生的內容。用來和content屬性一塊兒使用，而且必須定義content屬性

<style>
    p::after {
        position: absolute;
        left: 0;
        background: #fff;
        color: #000;
        content: "在 p 元素中 span 元素以後可看到這段文字";
        font-size:14px;
    }
</style>

<p>
    <span>我是一個span</span>
</p>

::placeholder CSS3

E::placeholder { sRules }

設置對象文字佔位符的樣式。

::placeholder 僞元素用於控制表單輸入框佔位符的外觀，它容許開發者/設計師改變文字佔位符的樣式，默認的文字佔位符爲淺灰色。

當表單背景色爲相似的顏色時它可能效果並非很明顯，那麼就可使用這個僞元素來改變文字佔位符的顏色。

須要注意的是，除了Firefox是 ::[prefix]placeholder，其餘瀏覽器都是使用 ::[prefix]input-placeholder

<style>
    input::-webkit-input-placeholder {
        color: green;
    }
    input:-ms-input-placeholder { // IE10+
        color: green;
    }
    input:-moz-placeholder { // Firefox4-18
        color: green;
    }
    input::-moz-placeholder { // Firefox19+
        color: green;
    }
</style>

<input id="test" placeholder="Placeholder text!">

::selection CSS3

E::selection { sRules }

設置對象被選擇時的樣式。

須要注意的是，::selection只能定義被選擇時的background-color，color及text-shadow

<style>
    p::selection{
        background:#000;
        color:#f00;
    }
</style>

<p>當我被選中是，我會變成黑色背景紅色文字</p>

參考資料

http://www.css88.com/book/css/selectors/index.htm

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程