你想知道的CSS3選擇器，全在這里

SS3 選擇器——基本選擇器

1、通配符（*）

通配符

<ul class="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>
.demo * {border:1px solid blue;}

2、元素選擇器（Element）

元素選擇器

<ul class="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
</ul>

li { background-color: grey; color: orange; }

元素選擇器，是css選擇器中最常見而且最基本的選擇器。元素選擇器其實就是文檔的元素，如html,body,p,div等等，比如這個demo：中元素包括了div,ul,li等。

3、類選擇器（.className）

類選擇器

<ul class="demo">
    <li>1</li>
    <li class="li-2">2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

.li-2 {font-weight: bold; color: yellow;}

上面代碼表示是給有 "li-2" 類名的元素加上一個“字體為粗體，顏色為黃色”的樣式。

4、id選擇器（#ID）

id選擇器

<ul class="demo">
    <li id="first">1</li>
    <li class="li-2">2</li>
    <li>3</li>
    <li>4</li>
    <li id="last">5</li>
</ul>

#first {background: lime;color: #000;}
#last {background: #000;color: lime;}
上面的代碼選擇了id為"first"和"last"的li。

5、后代選擇器（E F）

后代選擇器

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

ul li { background-color: red; color: #fff; }

元素的子元素或者是孫元素或者是更深層次的關(guān)系，都將被選中，換句話說，不論li在ul中有多少層關(guān)系，都將被選中。注意他們之間需要一個空格隔開

6、子元素選擇器(E>F)

子元素選擇器

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

ul > li {background: green;color: yellow;}

子元素選擇器只能選擇某元素的第一層子元素，其中ul為父元素，而li為子元素，其中ul>li所表示的是：選擇了ul元素下的所有第一層子元素li。簡單的說就是只選擇當(dāng)前第一層級的子元素

7、相鄰兄弟元素選擇器(E + F)

相鄰兄弟元素選擇器

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

li + li {background: green;color: yellow; border: 1px solid #ccc;}

相鄰兄弟選擇器可以選擇緊接在另一個元素后面的元素。

上面的 li+li，其中第二個li是第一個li的相鄰元素，第三個又是第二個相鄰元素，因此第三個也被選擇，依此類推，所以后面4個li都被選中了。

8、通用兄弟選擇器（E ? F）

通用兄弟選擇器

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
</ul>

.active ~ li {background: green;color: yellow; border: 1px solid #ccc;}

選擇某元素后面的所有兄弟元素（選擇相鄰的所有兄弟元素），和相鄰選擇器類似（相鄰選擇器只選擇相鄰的一個元素）

選擇中了li.active 元素后面的所有兄弟元素li

9、群組選擇器

群組選擇器

<ul class="demo">
    <li  class="first">1</li>
    <li>2</li>
    <li  class="li-3">3</li>
    <li>4</li>
    <li class="last">5</li>
</ul>

.first,
.last,
.li-3 {background: green;color: yellow; border: 1px solid #ccc;}

群組選擇器是將具有相同樣式的元素分組在一起，每個選擇器之間使用逗號“，”隔開

li.first和li.last和.li-3具有相同的樣式效果，所以我們把他們寫到一個組里

CSS3 選擇器——屬性選擇器

1、E[attr]：只使用屬性名，但沒有確定任何屬性值

屬性名選擇器

       <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[id] { background: blue; color:yellow; font-weight:bold; }

選擇了div.demo下所有帶有id屬性的a元素，并在這個元素上使用背景色為藍色，字體加粗并為黃色的樣式，

2、E[attr="value"]選擇指定的屬性對象

選擇指定的屬性對象

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[id="first"] {background: blue; color:yellow; font-weight:bold; }

選擇了.demo a[id="first"] 選擇屬性id的值為first的對象。

3、E[attr~="value"] 包含屬性值

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[title~="website"]{ background:orange; color:green; }

div.demo下的a元素的title屬性中，只要其屬性值中含有"website"這個詞就會被選擇

4、E[attr^="value"] 選擇attr屬性值以“value”開頭的所有元素

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[href^="http://"]{ background:orange; color:green; }
.demo a[href^="mailto:"]{ background:green; color:orange; }
選擇了以href屬性并且以"http://"和"mailto:"開頭的所有a元素。

5、E[attr$="value"] 選擇attr屬性值以"value"結(jié)尾的所有元素


        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[href$="png"]{ background:orange; color:green; }
選擇div.demo中元素有href屬性，并以png值結(jié)尾的a元素。

6、E[attr*="value"] 選擇attr屬性值中包含子串"value"的所有元素。

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[title*="site"]{ background:black; color:white; }
選擇了div.demo中a元素，而a元素的title屬性中只要有"site"就選中。

7、E[attr|="value"] 選擇attr屬性值等于value或以value-開頭的所有元素

        <ul class="demo">
            <a href="http://www.w3cplus.com" target="_blank" class="links item first" id="first" title="w3cplus">1</a>
            <a href="" class="links active item" title="test website" target="_blank" lang="zh">2</a>
            <a href="sites/file/test.html" class="links item" title="this is a link" lang="zh-cn">3</a>
            <a href="sites/file/test.png" class="links item" target="_balnk" lang="zh-tw">4</a>
            <a href="sites/file/image.jpg" class="links item" title="zh-cn">5</a>
            <a href="mailto:w3cplus@hotmail" class="links item" title="website link" lang="zh">6</a>
            <a href="" class="links item" title="open the website" lang="cn">7</a>
            <a href="" class="links item" title="close the website" lang="en-zh">8</a>
            <a href="" class="links item" title="http://www.sina.com">9</a>
            <a href="" class="links item last" id="last">10</a>
        </ul>

.demo a[lang|="zh"]{ background: gray; color: yellow; }

選擇了div.demo中l(wèi)ang屬性等于zh或以zh-開頭的所有a元素。

CSS3 選擇器——偽類選擇器

1、:first-child 選擇某個元素的第一個子元素

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

.demo li:first-child { background: red; border: 1px solid yellow; color: #fff; }
選擇某個元素的第一個子元素。

2、:last-child 選擇某個元素的最后一個子元素

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

.demo li:last-child { background: red; border: 1px solid yellow; color: #fff; }
選擇某個元素的最后一個子元素。

3、:nth-child() 選擇某個的一個或多個特定的子元素

:nth-child(number);/*參數(shù)是具體數(shù)字*/
:nth-child(n);/*參數(shù)是n,n從0開始計算*/
:nth-child(n*length)/*n的倍數(shù)選擇，n從0開始算*/
:nth-child(n+length);/*選擇大于length后面的元素*/
:nth-child(-n+length)/*選擇小于length前面的元素*/
:nth-child(n*length+1);/*表示隔幾選一*/

<ul class="demo">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

:nth-child() 可以定義括號的值（值可以是整數(shù)，也可以是表達式）

.demo li:nth-child(3) { background: red; border: 1px solid yellow; color: #fff; }
選擇 div 元素下的第3個 li 子元素。

[微風(fēng)][微風(fēng)]

:nth-child(n) /*參數(shù)是n,n從0開始計算*/

.demo li:nth-child(n) { background: red; border: 1px solid yellow; color: #fff; }
等于.demo li {background: lime;}

n是一個簡單的表達式，那么"n"取值是從“0”開始計算。

?[微風(fēng)][微風(fēng)]

:nth-child(n*length)

.demo li:nth-child(2n) { background: red; border: 1px solid yellow; color: #fff; }
等于.demo li:nth-child(even) {}

選擇偶數(shù)的對象：n是一個簡單的表達式，那么"n"取值是從“0”開始計算。
表達示結(jié)果，如下:
.demo li:nth-child(2n) = (2*0) = 0
.demo li:nth-child(2n) = (2*1) = 2
.demo li:nth-child(2n) = (2*2) = 4
.demo li:nth-child(2n) = (2*3) = 6
以此類推....

?[微風(fēng)][微風(fēng)]

.demo li:nth-child(2n-1) { background: red; border: 1px solid yellow; color: #fff; }
等于.demo li:nth-child(odd) {}

選擇奇數(shù)的對象：n是一個簡單的表達式，那么"n"取值是從“0”開始計算。
表達示結(jié)果，如下:
.demo li:nth-child(2n-1) = (2*0-1) = -1
.demo li:nth-child(2n-1) = (2*1-1) = 1
.demo li:nth-child(2n-1) = (2*2-1) = 3
.demo li:nth-child(2n-1) = (2*3-1) = 5
以此類推....

?[微風(fēng)][微風(fēng)]

:nth-child(n+length); /*選擇大于length后面的元素*/

nth-child(n+5)從第五個元素開始選擇，這里的數(shù)字你可以自己定義
.demo li:nth-child(n+5){ background: red; border: 1px solid yellow; color: #fff; }

n是一個簡單的表達式，那么"n"取值是從“0”開始計算。

表達示結(jié)果，如下:
.demo li:nth-child(0+5) = 5
.demo li:nth-child(1+5) = 6
.demo li:nth-child(2+5) = 7
.demo li:nth-child(3+5) = 8
以此類推....

?[微風(fēng)][微風(fēng)]

nth-child(-n+5)反向從第五個元素開始選擇，這里的數(shù)字你可以自己定義

.demo li:nth-child(-n+5){ background: red; border: 1px solid yellow; color: #fff; }

n是一個簡單的表達式，那么"n"取值是從“0”開始計算。

表達示結(jié)果，如下:
.demo li:nth-child(-0+5) = 5
.demo li:nth-child(-1+5) = 4
.demo li:nth-child(-2+5) = 3
.demo li:nth-child(-3+5) = 2
以此類推....

?[微風(fēng)][微風(fēng)]

:nth-child(n*length+1); /*表示隔幾選一*/

:nth-child(4n+1)間隔選擇對象，數(shù)字可自定義

.demo li:nth-child(4n+1) { background: red; border: 1px solid yellow; color: #fff; }

n是一個簡單的表達式，那么"n"取值是從“0”開始計算。

表達示結(jié)果，如下:
.demo li:nth-child(4*0+1) = 1
.demo li:nth-child(4*1+1) = 5
.demo li:nth-child(4*2+1) = 9
.demo li:nth-child(4*3+1) = 13
以此類推....

4、:nth-last-child() 選擇指定的元素，從最后一個開始

.demo li:nth-last-child(4) { background: red; border: 1px solid yellow; color: #fff; }
選擇倒數(shù)第四個元素。

?[微風(fēng)][微風(fēng)]

可以用表達示，選擇奇數(shù)

.demo li:nth-last-child(2n) { background: red; border: 1px solid yellow; color: #fff; }

n是一個簡單的表達式，那么"n"取值是從“0”開始計算。

表達示結(jié)果，如下:
:nth-last-child(2*1) = 2
:nth-last-child(2*2) = 4
:nth-last-child(2*3) = 6
:nth-last-child(2*4) = 8
以此類推....

?[微風(fēng)][微風(fēng)]

可以用表達示，選擇偶數(shù)

.demo li:nth-last-child(2n-1) { background: red; border: 1px solid yellow; color: #fff; }

n是一個簡單的表達式，那么"n"取值是從“0”開始計算。

表達示結(jié)果，如下:
:nth-last-child(2*1-1) = 1
:nth-last-child(2*2-1) = 3
:nth-last-child(2*3-1) = 5
:nth-last-child(2*4-1) = 7
:nth-last-child(2*5-1) = 9

5、:nth-of-type 選擇指定的類型元素

.demo li:nth-of-type(8) { background: red; border: 1px solid yellow; color: #fff; }
指定獲取類型為 li 的第8個元素，中間間隔了a元素

?[微風(fēng)][微風(fēng)]

與 :nth-child區(qū)別，:nth-child不指定類型 .demo li:nth-child(8) { background: red; border: 1px solid yellow; color: #fff; }

指定獲取元素為li第8個元素，中間間隔了a元素，因沒有指定類型，而第8個元素是a，所以無法設(shè)置樣式

6、:nth-last-of-type() 選擇指定類型的元素，從元素的最后一個開始計算

.demo li:nth-last-of-type(2) { background: red; border: 1px solid yellow; color: #fff; }

數(shù)字可使用n表達式計算，從最后一個元素開始計算，獲取指定類型為 li 的第2個元素，

7、:first-of-type 選擇指定類型的第一個元素；

.demo li:first-of-type { background: red; border: 1px solid yellow; color: #fff; }

:first-of-type與:first-child類型，前者區(qū)別了類型，后者無區(qū)域

獲取第一個為 li 的元素，子元素中包含了a、li兩種元素

8、:last-of-type 選擇指定類型的最后一個元素；

.demo li:last-of-type { background: red; border: 1px solid yellow; color: #fff; }

:last-of-type與:last-child類型，前者區(qū)分了類型，后者無區(qū)分

獲取最后一個為 li 的元素，子元素中包含了a、li兩種元素

9、:only-child 選擇的元素是它的父元素的唯一一個了元素；

        <div>
            <p>我是子級，在父級中是唯一一個子元素。</p>
        </div>

        <div>
            <span>我是span標(biāo)簽，在父級中并不是唯一的子元素，因為還有一個p標(biāo)簽。</span>
            <p>我是p標(biāo)簽，在父級中并不是唯一的子元素，因為還有一個span標(biāo)簽。</p>
        </div>

        <p>
            我是p標(biāo)簽，而我并沒有父級。
        </p>

p:only-child { background: #ff0000; }

我是子級，在父級中是唯一一個子元素。
我是span標(biāo)簽，在父級中并不是唯一的子元素，因為還有一個p標(biāo)簽。
我是p標(biāo)簽，在父級中并不是唯一的子元素，因為還有一個span標(biāo)簽。
我是p標(biāo)簽，而我并沒有父級。

10、:only-of-type 選擇一個元素是它的上級元素的唯一一個相同類型的子元素；

        <div>
            <p>我是子級p元素，在父級中是唯一的一個p元素。所以會被選擇中。</p>
            <span>我是子級span元素，在父級中并不是唯一的span元素。</span>
            <span>我是子級span元素，在父級中并不是唯一的span元素。</span>
            <span>我是子級span元素，在父級中并不是唯一的span元素。</span>
        </div>
        <div>
            <p>我是p標(biāo)簽，在父級中并不是唯一的p元素，因為還有一個和我相同的p元素。所以不會被選中。</p>
            <p>我是p標(biāo)簽，在父級中并不是唯一的p元素，因為還有一個和我相同的p元素。所以不會被選中。</p>
        </div>

p:only-of-type { background:#ff0000; }

我是子級p元素，在父級中是唯一的一個p元素。所以會被選擇中。

我是子級span元素，在父級中并不是唯一的span元素。我是子級span元素，在父級中并不是唯一的span元素。我是子級span元素，在父級中并不是唯一的span元素。

我是p標(biāo)簽，在父級中并不是唯一的p元素，因為還有一個和我相同的p元素。所以不會被選中。
我是p標(biāo)簽，在父級中并不是唯一的p元素，因為還有一個和我相同的p元素。所以不會被選中。

11、:empty 選擇的元素里面沒有任何內(nèi)容。

        <p>我是一個p標(biāo)簽，我<span style="color: red;">下面</span>有個p標(biāo)簽，內(nèi)容是空的，所以它會被選中。</p>
        <p></p>
        <p>我是一個p標(biāo)簽，我<span style="color: red;">上面</span>有個p標(biāo)簽，內(nèi)容是空的，所以它會被選中。</p>
        <p>我是一個p標(biāo)簽。</p>
        <p>我是一個p標(biāo)簽。</p>

p:empty { background:#ff0000; }

第2行的p標(biāo)簽會被選中，因為它沒有內(nèi)容。

文介紹了如何在網(wǎng)頁中使用css及css的常用知識點，今天首先介紹css 的選擇器，所謂選擇器就是通過一定的規(guī)則語法查找html元素節(jié)點，只有找到這些元素才能應(yīng)用樣式。

選擇器類型

css 選擇器從不精確到最精確，可分以下幾種：

通用選擇器（*）-—— 選擇所有元素
標(biāo)簽選擇器（tag）—— 按 HTML 標(biāo)記名稱定位元素（包括偽元素）

tag 是html 標(biāo)簽關(guān)鍵字，一般小寫。

類選擇器（.class）—— 分別按類定位元素（包括偽類）

在html標(biāo)簽上使用 class="" 屬性應(yīng)用css 樣式，可以寫多個class，空格隔開，如：<p class="cls1 cls2">。

屬性選擇器([attr]) —— 分別按標(biāo)簽屬性定位元素（包括偽類）

屬性值html標(biāo)簽上的各種屬性，如 [alt], [type="text"], [lang="en"]。

ID 選擇器 —— 按 id 定位元素

id 必需是唯一的，不能重復(fù)。

語法如下：

* {
  /* 通用選擇器*/
}

tag {
  /* 標(biāo)簽選擇器 */
}

tag::before {
  /* 標(biāo)簽選擇器和偽元素 */
}

.class {
  /* 類選擇器 */
}

.class:hover {
  /* 類選擇器和偽類 */
}

[attr] {
  /* 屬性選擇器 */
}

#id {
  /* ID 選擇器 */
}

偽元素有兩個冒號 ( ::, 比如 ::before)，偽類有一個冒號 ( :, 比如 :hover)。

后面學(xué)習(xí)JavaScript 時，會學(xué)習(xí)到通過js也可以查找html元素，查找規(guī)則就是通過css 選擇器查找，如下示例：

此查詢用于獲取與選擇器匹配的所有元素：

document.querySelectorAll('article h2')

如上代碼獲取到一個html 節(jié)點集合，每個html節(jié)點都有子節(jié)點，孫子節(jié)點，依次類推.....

html 節(jié)點樹

在網(wǎng)頁中 html 是一個樹狀的結(jié)構(gòu)，每個html 元素是一個節(jié)點，且每個節(jié)點下面又有子節(jié)點。

如下圖：

css 選擇器就是在這樣的一個樹結(jié)構(gòu)里面查找html元素節(jié)點，找到后瀏覽器渲染對應(yīng)的樣式。

組合使用選擇器

選擇器除了可以單個使用，也可以組合使用，比如 #id p, #id >.class,p+h3等，按功能可分以下幾種：

包含選擇器 —— 通過空格符隔開，比如：p span，指p標(biāo)簽下的所有span 標(biāo)簽，包括子級的子級里面的span。

示例：

<!DOCTYPE html>
<html>
<head>
<style>
	div span{
		color:red;
	}
</style>
</head>
<body>
<div>黑色<span>紅色</span></div>
<div>
   <p>黑色<span>紅色</span><span>紅色</span></p>
</div>
<span>不是紅色</span>
<span>不是紅色</span>
</body>
</html>

顯示效果：

子選擇器 —— 通過">" 隔開，比如： p>span, 指p元素下子級span，子級的子級下的span 就找不到了。

示例：

<!DOCTYPE html>
<html>
<head>
<style>
	div > span{
		color:red;
	}
</style>
</head>
<body>
<div>黑色<span>紅色</span></div>
<div>
    黑色<span>紅色</span><span>紅色</span>
    <p><span>不是紅色</span></p>
</div>
<span>不是紅色</span>
<span>不是紅色</span>
</body>
</html>

顯示效果：

相鄰選擇器 —— 通過“+”隔開，比如： p+span，指和p元素同級且緊跟在p元素節(jié)點后面的span節(jié)點。

示例：

<!DOCTYPE html>
<html>
<head>
<style>
	p + span{
		color:red;
	}
</style>
</head>
<body>
  <p>黑色</p>
  <span>紅色</span>
  <span>不是紅色</span>
  <span>不是紅色</span>
</body>
</html>

顯示效果：

這里一定注意span必須緊跟在p標(biāo)簽后面，它們2個之間有任何標(biāo)簽都不會起作用了。

兄弟選擇器 —— 通過“~”隔開，比如：p~span，指和p同級且在其后面的所有span節(jié)點。

示例：

<!DOCTYPE html>
<html>
<head>
<style>
    p~span{
      color: red;
    }
</style>
</head>
<body>
  <p>黑色</p>
  <span>紅色</span><br>
  <span>紅色</span><br>
  <h1>標(biāo)題</h1>
  <span>紅色</span>
</body>
</html>

顯示效果：

分組選擇器 —— 通過“，”隔開，比如：h1,h2,h3,指這些元素共用相同的樣式。

如下示例：

h1,h2,h3{
	background-color: red;
}

整個頁面中的h1、h2、h3的背景色都是紅色，無論在哪個層次的節(jié)點中都會起作用。

選擇器優(yōu)先級

不同的選擇器如果作用于同一個html元素，瀏覽器會根據(jù)優(yōu)先級規(guī)則渲染樣式。

優(yōu)先級高的選擇器會覆蓋優(yōu)先級低的樣式，如下表從上到下優(yōu)先級依次變高：

選擇器	例子	級別
標(biāo)簽選擇器	h1	1
類，屬性選擇器	.class, [type="text"]	2
ID選擇器	#contact	3
內(nèi)聯(lián)樣式	<div style="background: purple">	4
!important關(guān)鍵詞	div { color: green !important }	覆蓋所有

請謹慎地使用!important，它變得非常難以維護。!important 僅在絕對必要時才應(yīng)使用，例如為某些您無法控制的第三方設(shè)置樣式，使用內(nèi)聯(lián)樣式，以及在少數(shù)情況下使用 JavaScript 切換顯示。

總結(jié)

css 選擇器是一種查詢html元素節(jié)點的語言，當(dāng)css選擇器互相組合時，會變得很復(fù)雜，所以平時盡量減少使用組合選擇器。

關(guān)于優(yōu)先級，總而言之，從標(biāo)簽選擇器到!important的每層級別都比前一個級別強一個數(shù)量級。

學(xué)習(xí)css，切記死記硬背，理解它很重要，結(jié)合之前學(xué)習(xí)的html 知識多練習(xí)，感謝關(guān)注。

上篇：前端入門——css 樣式表簡介

SS 選擇器是用來指定該組 CSS 樣式會對什么元素生效的，是連接 HTML 結(jié)構(gòu)和 CSS 樣式的橋梁。這一篇將給大家介紹一下 CSS 里基礎(chǔ)選擇器的用法，同時會對使用上給出一些建議。

基礎(chǔ)選擇器包括 ID 選擇器、類選擇器、標(biāo)簽選擇器、通配符選擇器和屬性選擇器這幾種。

ID 選擇器

ID 選擇器是用 “#” 號加 ID 名稱 xxx 來表示，用來選擇 HTML 中 id="xxx" 的 DOM 元素。我們以選擇下面這個 ID 為 content 的元素為例：

<div id="content">我是id選擇器需要選中的元素</div>

當(dāng)我們想把樣式應(yīng)用到這個元素的時候，就可以用下面的 ID 選擇器：

#content{
 color: #fff;
 background: #000;
}

這樣 ID 為 content 的元素就會有一個黑底白字的效果了。在 ID 選擇器中，有幾點要注意：

1、ID 選擇器只能對一個元素生效，同一個頁面里不允許出現(xiàn)兩個 ID 相同的元素。2、理論上 ID 選擇器是效率最高的選擇器。但是由于它只能選一個元素，特異性太高，在實際開發(fā)中也很少在 CSS 里使用 ID 選擇器。3、也正是因為 ID 選擇器特異性高，所以在 JS 里使用 ID 選擇器的比較常見。

類選擇器

類選擇器是用 “.” 加上 class 名稱來表示，用來選擇 HTML 中 class="xxx" 的 DOM 元素。我們以選擇下面 class 名稱為 list-item 的元素為例：

<ul>
 <li class="list-item"></li>
 <li class="list-item"></li>
 <li class="list-item"></li>
 <li class="list-item"></li>
</ul>

當(dāng)我們想把樣式應(yīng)用到列表里每一條元素的時候，就可以用類選擇器：

.list-item{
 border-bottom: 1px solid #ccc;
}

這樣列表里所有的項就都有一個寬 1px 灰色的下邊框了。

在類選擇器中，要注意以下幾點：

1、類選擇器的效率也是不錯的，和 ID 選擇器并不會有太大的差異。所以在寫 CSS 的時候，比較推薦用類選擇器。2、類選擇器會選擇到所有類名相同的 DOM 元素，沒有數(shù)量限制。3、類選擇器應(yīng)該是樣式開發(fā)中應(yīng)用最多的選擇器。

通配選擇器

通配選擇器使用星號來選擇到頁面里所有元素。用法如下：

*{
 margin: 0;
 padding: 0;
}

上面這個樣式就是把所有元素的內(nèi)外邊距都歸零。由于通配選擇器要把樣式覆蓋到所有的元素上，可想而知它的效率并不會高，所以在實際開發(fā)中一般不建議使用通配選擇器。

標(biāo)簽選擇器

標(biāo)簽選擇器的作用是選中 HTML 中某一種類的標(biāo)簽，它直接使用 HTML 中的標(biāo)簽名作為選擇器的名稱。比如我們需要把頁面里所有大標(biāo)題的字號都調(diào)成 20px，就可以用標(biāo)簽選擇器來實現(xiàn)：

h1{
 font-size: 20px;
}

Tips：標(biāo)簽選擇器通常用來重置某些標(biāo)簽的樣式，標(biāo)簽選擇器的效率也不是很高，但要好過通配選擇器。

屬性選擇器

屬性選擇器比較好理解，就是通過 DOM 的屬性來選擇該 DOM 節(jié)點。屬性選擇器是用中括號 “[]” 包裹，比如選擇所有帶有 href 屬性的標(biāo)簽，就可以使用這樣的選擇器:

a[href]{
 color: red;
}

這條選擇器就可以讓所有帶 href 屬性的 a 標(biāo)簽字體都變成紅色。屬性選擇器有如下幾種形式：

[attr]，用來選擇帶有 attr 屬性的元素，如剛提到的 a [href]。

<!-- HTML：-->
<a href="/">返回主頁</a>
// 下面的CSS會使所有帶href的a標(biāo)簽字體變紅色：
a[href]{
 color: red;
}

[attr=xxx]，用來選擇有 attr 屬性且屬性值等于 xxx 的元素，如選擇所有文本類型的輸入框，可以用 input [type=text]。

<!-- HTML：-->
<input type="text" value="大花碗里扣個大花活蛤蟆"/>
// CSS：
input[type=text]{
 color: red;
}

這個選擇器里面要注意，xxx 和 HTML 中的屬性值必須完全相等才會生效。

<!-- HTML：-->
<input class="input text" type="text" value="大花碗里扣個大花活蛤蟆"/>
// CSS：
input[class=input]{
 color: red;
}

上面例子中 input [class=input] 的選擇器并不能選中 class=“input text” 的元素，如果非要用這種選擇器，必須使用 input [class=“input text”] 才可以。

[attr~=xxx]，這個選擇器中間用了～=，選擇屬性值中包含 xxx 的元素，但一定是逗號分隔的多個值中有一個能和 xxx 相等才行。

<!-- HTML：-->
<input class="input text" type="text" value="大花碗里扣個大花活蛤蟆"/>
// CSS：
input[class~=input]{
 color: red;
}

在上面的例子中，使用 input [class~=input] 就可以選中 class=“input text” 的元素了。

[attr|=xxx]，這個選擇器是用來選擇屬性值為 xxx 或 xxx- 開頭的元素，比較常用的場景是選擇某一類的屬性。

<!-- HTML：-->
<div class="article">我是article</div>
<div class="article-title">我是article-title</div>
<div class="article-content">我是article-content</div>
<div class="article_footer">我是article_footer，不是以artical-開頭的</div>
// CSS：
div[class|=article]{
 color: red;
}

上面的選擇器就可以對所有 article 開頭的元素生效，包括 class=“article” 的元素。上面的例子中，選擇器會對前三條都生效，但不會對第四條生效。

[attr^=xxx]，這個選擇器會匹配以 xxx 開頭的元素，實際上就是用正則去匹配屬性值，只要是以 xxx 開頭都可以。

<!-- HTML：-->
<div class="article">我是article</div>
<div class="article-title">我是article-title</div>
<div class="article-content">我是article-content</div>
<div class="article_footer">我是article_footer，不是以artical-開頭的</div>
// CSS：
div[class^=article]{
 color: red;
}

還是用剛才的例子，如果把選擇器換成 div [class^=article]，那么上面四個 HTML 元素都會被選中了。

[attr$=xxx]，這個選擇器和上一個相似，它是用正則匹配的方式來選擇屬性值以 xxx 結(jié)尾的元素。

<!-- HTML：-->
<button class="btn btn-disabled">禁用的按鈕</button>
<select class="select select-disabled city-select"></select>
<input class="input input-disabled" value="禁用的輸入框"/>
// CSS：
[class$=disabled]{
 display: none;
}

上面的例子中，我們想把頁面里有禁用標(biāo)識的所有元素都隱藏掉，就可以使用 [class$=disabled] 來選擇所有 class 里以 disabled 結(jié)尾的元素。這么用的前提是提前約定好，disabled 相關(guān)的類要放在最后，否則就像上面的 select 一樣不會生效。

[attr*=xxx]，最后一個，這個是用正則匹配的方式來選擇屬性值中包含 xxx 字符的所有元素。這個選擇器的規(guī)則算是最寬泛的，只要 xxx 是元素屬性值的子字符串，這個選擇器就會生效。

<!-- HTML：-->
<button class="btn btn-disabled">禁用的按鈕</button>
<select class="select select-disabled city-select"></select>
<input class="input input-disabled" value="禁用的輸入框"/>
// CSS：
[class*=disabled]{
 display: none;
}

還是用剛才 disable 的例子，如果我們用 [class*=disabled] 選擇器來選擇 disabled 元素，就可以不考慮 -disable 屬性所在的位置了，它對所有帶這個單詞的屬性都會生效，哪怕是 class=“i-am-a-disabled-element” 的元素都可以。

Tips：1. 屬性選擇器要做文本的匹配，所以效率也不會高。2. 在使用屬性選擇器時，盡量要給它設(shè)置上生效的范圍，如果只用了個 [href] 相當(dāng)于要在所有元素里找?guī)?href 的元素，效率會很低。如果用 a [href] 會好的多，如果用 .link [href] 就更好了。這種組合方式我們在下一節(jié)講解。3. 屬性選擇器很靈活，如果能使用 CSS 代替 JS 解決一些需求，可以不用太糾結(jié)性能的問題，用 JS 實現(xiàn)也一樣要耗費資源的。

總結(jié)

這一篇我們講了 CSS 里幾種基礎(chǔ)的選擇器，包括 ID 選擇器、類選擇器、標(biāo)簽選擇器、通配符選擇器和屬性選擇器。這幾個選擇器里面最常用的就是類選擇器，最靈活的是屬性選擇器，而 ID 選擇器、標(biāo)簽選擇器和通配選擇器的應(yīng)用場景都不多。

在線咨詢

上一篇：給我 20 分鐘，我教你快速掌握JavaWeb和Http
下一篇：CSS 中幾種最常用的水平垂直居中的方法

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

你想知道的CSS3選擇器，全在這里

選擇器類型

html 節(jié)點樹

組合使用選擇器

選擇器優(yōu)先級

總結(jié)

您的項目需求