神通廣大的CSS3選擇器

cent 10年前發布 | 31K 次閱讀 CSS3 前端技術

每個前端工程師可能每天都會寫一些css，其中選擇器是很主要的一部分。但是，大家可能每天寫的大多是#id,.class這樣的選擇器，這并不稀奇，但是如果我們了解并且熟用css3為我們提供的強大并且優雅的選擇器，就可以簡化我們的代碼。

我在學習和整理css3的選擇器的時候都不會去考慮它的瀏覽器的支持程度，如果有需要，可以在這里查看它的瀏覽器支持情況：「 caniuse.com 」。

一、基本選擇器

1. 通配選擇器「*」

CSS

*{margin: 0;padding: 0} //選擇頁面中的所有元素并設置margin和padding值為0
 .demo *{background:#000} //選擇類名為demo的元素下面的所有元素并設置背景為黑色

 *{margin: 0;padding: 0} //選擇頁面中的所有元素并設置margin和padding值為0
.demo *{background:#000} //選擇類名為demo的元素下面的所有元素并設置背景為黑色

2.元素選擇器「Element」

CSS

body{background:#ccc} //選擇body元素 
 ul{background:#fff} //選擇列表ul元素

 body{background:#ccc} //選擇body元素
ul{background:#fff} //選擇列表ul元素

3.ID選擇器「#id」

CSS

html:
 <div id="demo"></div>
 css:
 #demo{do something}

html:
<div id="demo"></div>
css:
#demo{do something}

4.類選擇器「.class」

CSS

html:
  <ul class="demo"></ul>
  css:
  .demo{do something}
  ul.demo{do something} //這樣只會選擇有demo類名的ul元素

html:
  <ul class="demo"></ul>
  css:
  .demo{do something}
  ul.demo{do something} //這樣只會選擇有demo類名的ul元素

需要注意的是：多個頁面元素可以有相同的類名，但是元素的id在頁面中必須是唯一的。

5.群組選擇器「selector1，…，selectorN」

CSS

html:
<div class="section-1"></div>
<div class="section-2"></div>
<div class="section-3"></div>
ccss:
.section-1,.section-2,.section-3{do something} //給三個頁面元素定義公用的樣式

html:
<div class="section-1"></div>
<div class="section-2"></div>
<div class="section-3"></div>
ccss:
.section-1,.section-2,.section-3{do something} //給三個頁面元素定義公用的樣式

二、層次選擇器

6.后代選擇器「E F」

選擇匹配E的元素內的所有匹配F的元素。

XHTML

html：
<div class="parent">
        <div class="child"></div>
        <div class="child">
             <div class="c-child">
                  <div class="c-c-child"></div>
            </div>
        </div>    
</div>

css:

.parent div{do something} //會選擇parent里面的所有div，不管是子元素.child還是孫元素.c-child和.c-c-child

html：
<divclass="parent">
        <divclass="child"></div>
        <divclass="child">
            <divclass="c-child">
                  <divclass="c-c-child"></div>
            </div>
        </div>    
</div>
 
css:
 
.parent div{do something} //會選擇parent里面的所有div，不管是子元素.child還是孫元素.c-child和.c-c-child

7.子選擇器「E > F」

選擇配配E的元素的匹配F的直系子元素。

XHTML

html：
  <div class="parent">
          <div class="child"></div>
          <div class="child">
               <div class="c-child">
                    <div class="c-c-child"></div>
              </div>
          </div>    
  </div>

 css:
 .parent > div{do something} //只會選擇.parent元素的直系子元素，也就是只會選擇到 .child元素

html：
  <divclass="parent">
          <divclass="child"></div>
          <divclass="child">
              <divclass="c-child">
                    <divclass="c-c-child"></div>
              </div>
          </div>    
  </div>
 
 css:
 .parent> div{do something} //只會選擇.parent元素的直系子元素，也就是只會選擇到 .child元素

8.相鄰兄弟元素選擇器「E + F」

E和F是同輩元素，具有相同的父元素，并且F元素緊鄰在E元素的后面，此時可以使用相鄰兄弟選擇器。

XHTML

html:
<div>
    <div class="demo">1</div>
    <div>2</div>
    <div>3</div>
</div>

css:

.demo + div {do something}//會選中內容為2的div

html:
<div>
    <divclass="demo">1</div>
    <div>2</div>
    <div>3</div>
</div>
 
css:
 
.demo + div {do something}//會選中內容為2的div

9.通用兄弟選擇器「E ~ F」

E和F是同輩元素，具有相同的父元素，并且F元素在E元素之后，E ~ F將選中E元素后面的所有F元素。

XHTML

html:
  <div>
      <div class="demo">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
  </div>

  css:

 .demo ~ div {do something}//會選中內容為2,3,4的div

html:
  <div>
      <divclass="demo">1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
  </div>
 
  css:
 
 .demo ~ div {do something}//會選中內容為2,3,4的div

三、偽類選擇器

10.動態偽類選擇器「E:link,E:visited,E:active,E:hover,E:focus」

E:link{do something} //選擇定義了超鏈接但鏈接還未被訪問過的元素
 E:visited{do something} //選擇定義了超鏈接并且鏈接已經被訪問過的元素
 E:active{do something} //選擇匹配的E元素，且元素被激活，常用在錨點和按鈕上
 E:hover{do something} //選擇鼠標停留的匹配的E元素
 E:focus{do something} //選擇匹配的E元素，且元素獲得焦點

 E:link{do something} //選擇定義了超鏈接但鏈接還未被訪問過的元素
 E:visited{do something} //選擇定義了超鏈接并且鏈接已經被訪問過的元素
 E:active{do something} //選擇匹配的E元素，且元素被激活，常用在錨點和按鈕上
 E:hover{do something} //選擇鼠標停留的匹配的E元素
 E:focus{do something} //選擇匹配的E元素，且元素獲得焦點

11.目標偽類選擇器「E:target」

選擇匹配E的所有元素，且匹配元素被相關URL指向。

通俗點說，頁面的url如果帶有#something這樣的字樣( https://rawgit.com/zhangmengxue/Practice/master/demo.html#section-1 )那么:target就是用來匹配頁面中id為#something(section-1)的元素的。

這里有一個demo，利用:target實現純css的手風琴效果：[ 查看源碼 ][ 運行demo ]

12.語言偽類選擇器「E:lang(language)」

用來選擇指定了lang屬性的元素，其值為language。

CSS

html:
 <html lang="en-US"></html>

 css:
 :lang(en-US) {do something}

 html:
<html lang="en-US"></html>
 
css:
:lang(en-US){do something}

有時候網頁切換不同的語言版本的時候，可以通過這個選擇器做一些特殊的處理。

13.狀態偽類選擇器「E:checked,E:enabled,E:disabled」

E:checked{do something} //匹配表單中被選中的單選按鈕或復選按鈕
 E:enabled{do something} //匹配所有起用的表單元素
 E:disabled{do something} //匹配所有禁用的表單元素

 E:checked{do something} //匹配表單中被選中的單選按鈕或復選按鈕
 E:enabled{do something} //匹配所有起用的表單元素
 E:disabled{do something} //匹配所有禁用的表單元素

14.結構偽類選擇器「E:first-child,E:last-child,E:root,E:nth-child(n),E:nth-last-child(n),E:nth-of-type(n),E:nth-last-of-type(n),E:first-of-type,E:last-of-type,E:only-child,E:only-of-type,E:empty」

14.1 [E:first-child]

用來選取特定元素的第一個子元素。

XHTML

html:
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
css:

ul > li:first-child {do something} //用來選取ul中的第一個li元素

html:
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
css:
 
ul> li:first-child {do something} //用來選取ul中的第一個li元素

14.2 [E:last-child]

用來選取特定元素的最后一個子元素。

XHTML

html:
  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
  </ul>
  css:
  ul > li:last-child {do something} //用來選取ul中的最后一個li元素

html:
  <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
  </ul>
  css:
  ul> li:last-child {do something} //用來選取ul中的最后一個li元素

14.3 [E:nth-child()],[E:nth-last-child()]

用來選取某個父元素的一個或多個特定的子元素，其中的n可以是數值(從1開始)，也可以是包含n的表達式，也可以是odd(奇數)，even(偶數)。

E:nth-last-child()選擇器的使用方法于E:nth-child()是相同的，不同的是E:nth-last-child()選擇的元素是從父元素的最后一個子元素開始算起。

XHTML

html:
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
  css:
   ul > li:nth-child(2n+1) {do something} //用來選取ul中的第2n+1(奇數)個li元素

html:
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
  css:
  ul> li:nth-child(2n+1) {do something} //用來選取ul中的第2n+1(奇數)個li元素

14.4 [E:root]

用來匹配元素E所在的文檔中的根元素，在html文檔中根元素就始終是html。

14.5 [E:nth-of-type(),E:nth-last-of-type()]

E:nth-of-type()只計算父元素中指定的某種類型的子元素，當某個元素的子元素類型不只是一種時，使用nth-of-type來選擇會比較有用。

E:nth-last-of-type()的用法同E:nth-of-type()相同，不同的是:nth-last-of-type()也是從父元素的最后一個子元素開始算起。

li:nth-of-type(3)的話就會標識它只會選擇第三個li元素，別的元素會忽略掉，如：

XHTML

html:
<ul>
    <li>1</li>
    <li>2</li>
    <div>3</div>
    <div>4</div>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

ul > li:nth-of-type(3){do something} //會選中內容為5的li元素

html:
<ul>
    <li>1</li>
    <li>2</li>
    <div>3</div>
    <div>4</div>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
 
ul> li:nth-of-type(3){do something} //會選中內容為5的li元素

但是使用nth-child就會是這樣：

XHTML

html:
<ul>
    <li>1</li>
    <li>2</li>
    <div>3</div>
    <div>4</div>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>

ul > li:nth-child(3){do something} //會選中內容為3的div元素

html:
<ul>
    <li>1</li>
    <li>2</li>
    <div>3</div>
    <div>4</div>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
</ul>
 
ul> li:nth-child(3){do something} //會選中內容為3的div元素

14.6 [E:first-of-type,E:last-of-type]

:first-of-type和:last-of-type這兩個選擇器類似于:first-child和:last-child，不同的就是指定了元素的類型。

XHTML

html:
  <ul>
      <div>1</div>
      <div>2</div>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
 </ul>
 CSS：
 ul > li:first-of-type{do something} //會選中內容為3的li元素

html:
  <ul>
      <div>1</div>
      <div>2</div>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
 </ul>
 CSS：
 ul> li:first-of-type{do something} //會選中內容為3的li元素

14.7 [E:only-child]

匹配的元素E是其父元素的唯一子元素，也就是說匹配元素的父元素只有一個子元素。

XHTML

html:
<div class="demo">
   <p>1-1</p>
   <p>1-2</p>
</div>
<div class="demo">
   <p>2-1</p>
</div>

css:
.demo > p:only-child{do something}//會選取到內容為2-1的p元素

html:
<divclass="demo">
  <p>1-1</p>
  <p>1-2</p>
</div>
<divclass="demo">
  <p>2-1</p>
</div>
 
css:
.demo> p:only-child{do something}//會選取到內容為2-1的p元素

14.8 [E:only-of-type]

:only-of-type用來選擇一個元素，他的類型在他父元素的所有子元素中是唯一的。也就是說，一個父元素有很多子元素，而其中只有一個子元素的類型是唯一的，那么就可以使用:only-of-type來選取這個元素。

這個屬性說起來有點繞口，寫了個簡陋的demo說明意思：[ 查看源碼 ][ 運行demo ]

14.9 [E:empty]

:empty用來選擇沒有任何內容的元素，哪怕是一個空格都沒有的元素。

15 否定偽類選擇器「E:not(F)」

可以用來選取所有除了F外的所有元素。

input:not([type=submit]){do something} //可以用來給表單的所有input元素定義樣式，除了submit按鈕之外

 input:not([type=submit]){do something} //可以用來給表單的所有input元素定義樣式，除了submit按鈕之外

四、偽元素

以前我們使用的偽元素是:first-letter,:first-line,:before,:after,這樣的。但css3定義的偽元素變成了雙冒號，主要用來區分偽類和偽元素。對于IE6-8,僅支持單冒號表示方法，但是其他現代瀏覽器兩種表示方法是都可以的，也就是說在現代瀏覽器中偽元素使用雙冒號和單冒號都是會識別的。

16. 「::first-letter」

::first-letter用來選擇文本塊的第一個字母,常用于文本排版方面。

XHTML

html：
 <div>
     <p>this is test line.....</p>
 </div>

css:

div p::first-letter{do something} //將會選中<p>中的第一個字母t

html：
 <div>
    <p>this is test line.....</p>
 </div>
 
css:
 
div p::first-letter{do something} //將會選中<p>中的第一個字母t

17. 「::first-line」

::first-line用于匹配元素的第一行文本，也是常用于文本排版。

XHTML

html：
  <div>
      <p>
         this is first line..........省略.......
         this is the second line ...省略....
     </p>
  </div>

 css:

 div p::first-line{do something} //將會選中<p>中的第一行文字

html：
  <div>
      <p>
         this is first line..........省略.......
         this is the second line ...省略....
    </p>
  </div>
 
css:
 
div p::first-line{do something} //將會選中<p>中的第一行文字

18. 「::before,::after」

::before,::after同我們之前熟用的:before和:after使用方法相同，它們不是指存于標記中的內容，是配合使用content屬性可以插入額外內容的位置，盡管生成的內容不會成為DOM的一部分，但它同樣可以設置樣式。

19. 「::selection」

css3新定義的偽元素::selection用來匹配突出顯示的文本。但是使用前需要確認瀏覽器對它的支持程度。

瀏覽器默認的情況下，我們選中的文本背景是藍色，字體是白色。通過使用::selection，我們可以改變它的效果。

::selection{background:#ccc;color:red} //這樣改寫后我們選中的文本背景顏色和文字顏色就可以自定義了

 ::selection{background:#ccc;color:red} //這樣改寫后我們選中的文本背景顏色和文字顏色就可以自定義了

但是需要注意的是，::selection僅接受兩個屬性，一個是background，一個是color。

五、屬性選擇器

在html中，通過給元素添加屬性，給以給元素添加一些附加的信息，屬性選擇器就可以通過定位屬性來選取特定的元素。

20. 「 E[attr] 」

用來選擇有某個屬性的元素，不論這個屬性的值是什么。

XHTML

html:
<div id="demo">
  <a href="" id="test"></a>
  <a href="www.taobao.com" class="taobao"></a>
  <a href="#"  id="show">
</div>
css:
a[id]{do something} //將會選擇具有id屬性的a標簽

html:
<divid="demo">
  <ahref="" id="test"></a>
  <ahref="www.taobao.com" class="taobao"></a>
  <ahref="#"  id="show">
</div>
css:
a[id]{do something} //將會選擇具有id屬性的a標簽

21. 「 E[attr=val] 」

用來選取具有屬性attr并且屬性值為val的元素。

XHTML

html:
 <div id="demo">
   <a href="" id="test" title="test"></a>
   <a href="www.taobao.com" class="taobao"></a>
   <a href="#"  id="show" title="test">
</div>
 css:
 a[id=test][title]{do something} //將會選擇具有id屬性值為test且具有title屬性的a標簽

html:
 <divid="demo">
  <ahref="" id="test" title="test"></a>
  <ahref="www.taobao.com" class="taobao"></a>
  <ahref="#"  id="show" title="test">
</div>
 css:
 a[id=test][title]{do something} //將會選擇具有id屬性值為test且具有title屬性的a標簽

22. 「 E[attr|=val] 」

E[attr|=val]用來選擇具有屬性attr且屬性的值為val或以val-開頭的元素(其中-是不可或缺的)。

XHTML

html:
  <div id="demo">
    <a href="" id="test" title="test" lang="zh"></a>
    <a href="www.taobao.com" class="taobao" lang="zh-cn"></a>
    <a href="#"  id="show" title="test">
 </div>
 css:
  a[lang|=zh]{do something} //將會選擇具有lang屬性值為zh或屬性值以zh開頭的a標簽

html:
  <divid="demo">
    <ahref="" id="test" title="test" lang="zh"></a>
    <ahref="www.taobao.com" class="taobao" lang="zh-cn"></a>
    <ahref="#"  id="show" title="test">
 </div>
 css:
  a[lang|=zh]{do something} //將會選擇具有lang屬性值為zh或屬性值以zh開頭的a標簽

23. 「 E[attr~=val] 」

當某個元素的某個屬性具有多個用空格隔開的屬性值，此時使用E[attr~=val]只要attr屬性多個屬性值中有一個于val匹配元素就會被選中。

XHTML

html:
  <div id="demo">
    <a href="" id="test" title="test first"></a>
    <a href="www.taobao.com" class="taobao web" title="second test"></a>
    <a href="#"  id="show" title="test">
 </div>
  css:
  a[title~=test]{do something} //將會選擇具有title屬性且其中一個屬性值為test的a標簽

html:
  <divid="demo">
    <ahref="" id="test" title="test first"></a>
    <ahref="www.taobao.com" class="taobao web" title="second test"></a>
    <ahref="#"  id="show" title="test">
 </div>
  css:
  a[title~=test]{do something} //將會選擇具有title屬性且其中一個屬性值為test的a標簽

24. 「 E[attr*=val] 」

這個屬性選擇器使用了通配符，用來選擇具有屬性attr并且只要屬性值中包含val字符串的元素。也就是說只要所選屬性中有val字符串，不管是不是多個用空格分隔的屬性值，都將被選中。

XHTML

html:
    <div id="demo">
      <a href="" id="test" title="test first"></a>
      <a href="www.taobao.com" class="taobao web" title="secondtest"></a>
      <a href="#"  id="show" title="testlink">
   </div>
  css:
    a[title*=test]{do something} //將會選擇具有title屬性且其屬性值包含test字符串的a標簽

html:
    <divid="demo">
      <ahref="" id="test" title="test first"></a>
      <ahref="www.taobao.com" class="taobao web" title="secondtest"></a>
      <ahref="#"  id="show" title="testlink">
  </div>
  css:
    a[title*=test]{do something} //將會選擇具有title屬性且其屬性值包含test字符串的a標簽

25. 「 E[attr^=val] 」

用來選擇屬性attr的屬性值是以val開頭的所有元素，注意它與E[attr|=val]的區別，attr|=val中-是必不可少的，也就是說以val-開頭。

XHTML

html:
     <div id="demo">
       <a href="http://zhangmengxue.com" id="test" title="test first"></a>
       <a href="www.taobao.com" class="taobao web" title="secondtest"></a>
       <a href="#"  id="show" title="testlink">
    </div>
  css:
     a[href^=http]{do something} //將會選擇href屬性以http開頭的a標簽

html:
    <divid="demo">
      <ahref=" http://zhangmengxue.com" id="test" title="test first"></a>
      <ahref="www.taobao.com" class="taobao web" title="secondtest"></a>
      <ahref="#"  id="show" title="testlink">
    </div>
  css:
    a[href^=http]{do something} //將會選擇href屬性以http開頭的a標簽

26. 「 E[attr$=val] 」

這個選擇器剛好跟E[attr^=val]相反，用來選擇具有attr屬性且屬性值以val結尾的元素。

XHTML

html:
     <div id="demo">
        <a href="http://zhangmengxue.com/header.png" id="test" title="test first"></a>
        <a href="www.taobao.com/title.jpg" class="taobao web" title="secondtest"></a>
        <a href="#"  id="show" title="testlink">
     </div>
 css:
      a[href$=png]{do something} //將會選擇href屬性以png結尾的a標簽

html:
    <divid="demo">
        <ahref=" http://zhangmengxue.com/header.png" id="test" title="test first"></a>
        <ahref="www.taobao.com/title.jpg" class="taobao web" title="secondtest"></a>
        <ahref="#"  id="show" title="testlink">
    </div>
 css:
      a[href$=png]{do something} //將會選擇href屬性以png結尾的a標簽

本文由用戶 cent 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1454584693870.html

CSS3 前端技術

神通廣大的CSS3選擇器

一、基本選擇器

1. 通配選擇器 「*」

2.元素選擇器 「Element」

3.ID選擇器 「#id」

4.類選擇器 「.class」

5.群組選擇器 「selector1，…，selectorN」

二、層次選擇器

6.后代選擇器「E F」

7.子選擇器「E > F」

8.相鄰兄弟元素選擇器「E + F」

9.通用兄弟選擇器「E ~ F」

三、偽類選擇器

10.動態偽類選擇器「E:link,E:visited,E:active,E:hover,E:focus」

11.目標偽類選擇器「E:target」

12.語言偽類選擇器「E:lang(language)」

13.狀態偽類選擇器「E:checked,E:enabled,E:disabled」

14.結構偽類選擇器「E:first-child,E:last-child,E:root,E:nth-child(n),E:nth-last-child(n),E:nth-of-type(n),E:nth-last-of-type(n),E:first-of-type,E:last-of-type,E:only-child,E:only-of-type,E:empty」

14.1 [E:first-child]

14.2 [E:last-child]

14.3 [E:nth-child()],[E:nth-last-child()]

14.4 [E:root]

14.5 [E:nth-of-type(),E:nth-last-of-type()]

14.6 [E:first-of-type,E:last-of-type]

14.7 [E:only-child]

14.8 [E:only-of-type]

14.9 [E:empty]

15 否定偽類選擇器「E:not(F)」

四、偽元素

16. 「::first-letter」

17. 「::first-line」

18. 「::before,::after」

19. 「::selection」

五、屬性選擇器

20. 「 E[attr] 」

21. 「 E[attr=val] 」

22. 「 E[attr|=val] 」

23. 「 E[attr~=val] 」

24. 「 E[attr*=val] 」

25. 「 E[attr^=val] 」

26. 「 E[attr$=val] 」

相關經驗

相關資訊

相關文檔

目錄

1. 通配選擇器「*」

2.元素選擇器「Element」

3.ID選擇器「#id」

4.類選擇器「.class」

5.群組選擇器「selector1，…，selectorN」