CSS 背景色變化結構化僞類的練習

時間 2020-04-29

標籤 css 背景變化構化練習欄目 CSS 简体版

原文原文鏈接

CSS3的nth-child() 選擇器(兼容性很差)，在作表格偶數行變色的時候，我一般在綁定的時候，作一個js判斷，來加一個css，從而使表格偶數行和奇數行顏色不同。這樣的兼容性很好。css

可是最近在作手機網站的時候，因爲手機網站對瀏覽器兼容要求相對較低，手機瀏覽器大部分都支持css3，這就大大提升了開發效率。能夠隨意使用CSS3 :nth-child()僞類選擇器。html

IE9及以上版本，火狐，谷歌，Safari ，Opera都支持！css3

:nth-child(n) 選擇器匹配屬於其父元素的第 n個子元素，不論元素的類型。瀏覽器

n 能夠是數字、關鍵詞或公式。網站

p:nth-child(2) { background:#ff0000; } <body>

<h1>這是標題</h1>
<p>haorooms第一個段落。</p>
<p>haorooms第二個段落。</p>
<p>haorooms第三個段落。</p>
<p>haorooms第四個段落。</p>

</body>

面這段代碼請問那個段落顏色是紅色的？spa

答案是「haorooms第一個段落。」顏色變成了紅色！3d

解釋：:nth-child(n) 選擇器匹配屬於其父元素的第 n個子元素，不論元素的類型。p:nth-child(2),P標籤的父元素是body，body的第二個子元素是「haorooms第一個段落。」code

因此haorooms第一個段落顏色變爲了紅色！！！htm

不少朋友常常把:nth-child() 和:nth-of-type()混淆。blog

CSS3 :nth-of-type(n)選擇器匹配同類型中的第n個同級兄弟元素。

p:nth-of-type(2) { background:#ff0000; } <body>

<h1>這是標題</h1>
<p>haorooms第一個段落。</p>
<p>haorooms第二個段落。</p>
<p>haorooms第三個段落。</p>
<p>haorooms第四個段落。</p>

</body>

如今就是「haorooms第二個段落。」顏色變成了紅色。

由於table的子元素通常是tr，不會有別的，因此能夠用

tr:nth-child(odd) 與 tr:nth-child(even)

固然也能夠用

tr:nth-of-type(odd) tr:nth-of-type(even)

分別匹配序號爲奇數與偶數的元素。奇數(odd)與(2n+1)結果同樣；偶數(even)與(2n+0)及(2n)結果同樣。

倍數寫法：

:nth-child(an) 【:nth-of-type(an)同理，不解釋】

匹配全部倍數爲a的元素。其中參數an中的字母n不可缺省，它是倍數寫法的標誌，如3n、5n。

li:nth-child(3n){background:orange;}/*把第三、第六、第九、…、全部3的倍數的LI的背景設爲橙色*

延伸

:nth-child(2n+1)， :nth-child(2n-3) ， :nth-child(4n+3) ，還能夠 :nth-child(-an+b)也就是反向匹配。

要求：

HTML：

 1 <!DOCTYPE html>  2 <html>  3 <head lang="en">  4  <meta charset="UTF-8">  5  <title></title>  6  <!--經過設置表格顏色來練習一下結構化僞類-->  7  <!--表格中tbody，首行和尾行爲不一樣顏色 中間部分兩色交替-->  8  <link rel="stylesheet" href="demo_tableColor.css">  9 </head> 10 <body> 11 <div id="wrap"> 12  <table id="myTable" border="1" cellspacing="0" cellpadding="2"> 13  <thead> 14  <tr> 15  <td>序號</td> 16  <td>姓名</td> 17  <td>年齡</td> 18  <td>備註</td> 19  </tr> 20  </thead> 21  <tbody> 22  <tr> 23  <td>1</td> 24  <td>zhangsan</td> 25  <td>12</td> 26  <td>1</td> 27  </tr> 28  <tr> 29  <td>12</td> 30  <td>zhangsan</td> 31  <td>12</td> 32  <td>1</td> 33  </tr> 34  <tr> 35  <td>3</td> 36  <td>zhangsan</td> 37  <td>12</td> 38  <td>1</td> 39  </tr> 40  <tr> 41  <td>4</td> 42  <td>zhangsan</td> 43  <td>12</td> 44  <td>1</td> 45  </tr> 46  <tr> 47  <td>4</td> 48  <td>zhangsan</td> 49  <td>12</td> 50  <td>1</td> 51  </tr> 52  <tr> 53  <td>4</td> 54  <td>zhangsan</td> 55  <td>12</td> 56  <td>1</td> 57  </tr> 58  <tr> 59  <td>4</td> 60  <td>zhangsan</td> 61  <td>12</td> 62  <td>1</td> 63  </tr> 64  <tr> 65  <td>5</td> 66  <td>zhangsan</td> 67  <td>12</td> 68  <td>1</td> 69  </tr> 70  </tbody> 71  </table> 72 </div> 73 </body> 74 </html>

css：

 1 *{
 2  margin: 0px;
 3  padding:0px;
 4  box-sizing: border-box;
 5 }
 6 #wrap{
 7  position: relative;
 8  top: 20px;
 9  left: 20px;
10 }
11 #myTable{
12  width: 900px;
13  border:1px solid #e6e6e6;
14  }
15 td{
16  padding: 10px 20px;
17  border-left: transparent;
18  border-right: transparent;
19  border-top: transparent;
20 }
21 tbody :nth-child(odd) td{
22  background-color: #d9534f;
23 }
24 tbody :nth-child(even) td{
25  background-color: #eea236;
26 }
27 tbody :first-child td{
28  background-color: #bce8f1;
29 }
30 
31 tbody :last-child td{
32  background-color: #67b168;
33 }