神通廣大的CSS3選擇器

時間 2019-11-12

原文原文鏈接

做者：大額_skylar

http://www.cnblogs.com/skylar/p/css3-selector.htmlcss

每一個前端工程師可能天天都會寫一些css，其中選擇器是很主要的一部分。可是，你們可能天天寫的大可能是#id,.class這樣的選擇器，這並不稀奇，可是若是咱們瞭解而且熟用css3爲咱們提供的強大而且優雅的選擇器，就能夠簡化咱們的代碼。html

我在學習和整理css3的選擇器的時候都不會去考慮它的瀏覽器的支持程度，若是有須要，能夠在這裏查看它的瀏覽器支持狀況：「caniuse.com」。前端

1、基本選擇器

1. 通配選擇器「*」css3

1 *{margin: 0;padding: 0} //選擇頁面中的全部元素並設置margin和padding值爲0
2 .demo *{background:#000} //選擇類名爲demo的元素下面的全部元素並設置背景爲黑色

2.元素選擇器「Element」git

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

3.ID選擇器「#id」web

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

4.類選擇器「.class」瀏覽器

1  html:
2  <ul></ul>
3  css:
4  .demo{do something}
5  ul.demo{do something} //這樣只會選擇有demo類名的ul元素

須要注意的是：多個頁面元素能夠有相同的類名，可是元素的id在頁面中必須是惟一的。前端工程師

5.羣組選擇器「selector1，…，selectorN」學習

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

2、層次選擇器

6.後代選擇器「E F」字體

選擇匹配E的元素內的全部匹配F的元素。

1 html：  2 <div>  3         <div></div>  4         <div>  5              <div>  6                   <div></div>  7             </div>  8         </div>     9 </div> 10  11 css: 12  13 .parent div{do something} //會選擇parent裏面的全部div，不論是子元素.child仍是孫元素.c-child和.c-c-child

7.子選擇器「E > F」

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

 1    html：  2   <div>  3           <div></div>  4           <div>  5                <div>  6                     <div></div>  7               </div>  8           </div>     9   </div> 10   11  css: 12  .parent > div{do something} //只會選擇.parent元素的直系子元素，也就是隻會選擇到 .child元素

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

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

1 html:  2 <div>  3     <div>1</div>  4     <div>2</div>  5     <div>3</div>  6 </div>  7   8 css:  9 10 .demo + div {do something}//會選中內容爲2的div

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

E和F是同輩元素，具備相同的父元素，而且F元素在E元素以後，E ~ F將選中E元素後面的全部F元素。

 1  html:  2   <div>  3       <div>1</div>  4       <div>2</div>  5       <div>3</div>  6       <div>4</div>  7   </div>  8     9   css: 10    11  .demo ~ div {do something}//會選中內容爲2,3,4的div

3、僞類選擇器

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

1 E:link{do something} //選擇定義了超連接但連接還未被訪問過的元素
2 E:visited{do something} //選擇定義了超連接而且連接已經被訪問過的元素
3 E:active{do something} //選擇匹配的E元素，且元素被激活，經常使用在錨點和按鈕上
4 E:hover{do something} //選擇鼠標停留的匹配的E元素
5 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)的元素的。

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

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

1 html:
2 <html></html>
3 
4 css:
5 :lang(en-US) {do something}

有時候網頁切換不一樣的語言版本的時候，能夠經過這個選擇器作一些特殊的處理。

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

1 E:checked{do something} //匹配表單中被選中的單選按鈕或複選按鈕
2 E:enabled{do something} //匹配全部起用的表單元素
3 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]

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

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

14.2 [E:last-child]

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

 1  html:  2   <ul>  3       <li>1</li>  4       <li>2</li>  5       <li>3</li>  6       <li>4</li>  7       <li>5</li>  8   </ul>  9   css:10   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()選擇的元素是從父元素的最後一個子元素開始算起。

 1   html:  2     <ul>  3         <li>1</li>  4         <li>2</li>  5         <li>3</li>  6         <li>4</li>  7         <li>5</li>  8     </ul>  9   css:10    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元素，別的元素會忽略掉，如：

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

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

 1 html:  2 <ul>  3     <li>1</li>  4     <li>2</li>  5     <div>3</div>  6     <div>4</div>  7     <li>5</li>  8     <li>6</li>  9     <li>7</li> 10     <li>8</li>11 </ul> 12  13 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，不一樣的就是指定了元素的類型。

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

14.7 [E:only-child]

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

 1 html:  2 <div>  3    <p>1-1</p>  4    <p>1-2</p>  5 </div>  6 <div>  7    <p>2-1</p>  8 </div>  9  10 css: 11 .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按鈕以外

4、僞元素

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

16「::first-letter」

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

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

17「::first-line」

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

 1  html：  2   <div>  3       <p>  4          this is first line..........省略.......  5          this is the second line ...省略....  6      </p>  7   </div>  8   
 9  css:
 10  
 11  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，一個是color。

5、屬性選擇器

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

20「 E[attr] 」

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

1 html:
2 <div id="demo">
3   <a href="" id="test"></a>
4   <a href="www.taobao.com"></a>
5   <a href="#"  id="show">
6 </div> 7 css: 8 a[id]{do something} //將會選擇具備id屬性的a標籤

21「 E[attr=val] 」

用來選取具備屬性attr而且屬性值爲val的元素。

1  html:
2  <div id="demo">
3    <a href="" id="test" title="test"></a>
4    <a href="www.taobao.com"></a>
5    <a href="#"  id="show" title="test">
6 </div> 7  css: 8  a[id=test][title]{do something} //將會選擇具備id屬性值爲test且具備title屬性的a標籤

22「 E[attr|=val] 」

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

1  html:
2   <div id="demo">
3     <a href="" id="test" title="test"></a>
4     <a href="www.taobao.com"></a>
5     <a href="#"  id="show" title="test">
6  </div> 7  css: 8   a[lang|=zh]{do something} //將會選擇具備lang屬性值爲zh或屬性值以zh開頭的a標籤

23「 E[attr~=val] 」

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

1  html:
2   <div id="demo">
3     <a href="" id="test" title="test first"></a>
4     <a href="www.taobao.com" class="taobao web" title="second test"></a>
5     <a href="#"  id="show" title="test">
6  </div> 7   css: 8   a[title~=test]{do something} //將會選擇具備title屬性且其中一個屬性值爲test的a標籤

24「 E[attr^=val] 」

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

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

25「 E[attr$=val] 」

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。