[CSS3] 学习笔记-选择器详解(二)

1、选择器first-child、last-child、nth-child和nth-last-child

利用first-child、last-child、nth-child和nth-last-child能够针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素,甚至第偶数个或者第奇数个子元素进行样式的指定。

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <!--first-child-->
 7     <style>
 8         li:first-child{
 9             background-color: orange;
10         }
11      /*last-child   */
12         li:last-child{
13             background-color: red;
14         }
15         /*nth-child(position)*/
16         li:nth-child(3){
17             background-color: aqua;
18         }
19         /*nth-last-child() 从下往上数*/
20         li:nth-last-child(2){
21             background-color: gold;
22         }
23         /*li:nth-last-child(odd) 给奇数加效果*/
24         /*li:nth-last-child(even) 给奇数加效果*/
25     </style>
26 </head>
27 <body>
28     <h2>列表</h2>
29     <ul>
30         <li>列表1</li>
31         <li>列表2</li>
32         <li>列表3</li>
33         <li>列表4</li>
34         <li>列表5</li>
35         <li>列表6</li>
36     </ul>
37 </body>
38 </html>

 

2、选择器nth-of-type和nth-last-of-type

在CSS3中,通过选择器nth-of-type和nth-last-of-type,来避免选择元素时,会把子元素的个数也计算在内。使用这两个选择器时,CSS3在计算子元素是第奇数个子元素还是第偶数个子元素时,就只针对同类型的子元素进行计算了。

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style>
 7         /*以下是连同父级标签和子元素一同计算了*/
 8         /*h2:nth-child(odd){*/
 9             /*background-color: gold;*/
10         /*}*/
11 
12         h2:nth-of-type(even){
13             background-color: green;
14         }
15     </style>
16 </head>
17 <body>
18     <h2>文章标题</h2>
19     <p>文章正文</p>
20     <h2>文章标题</h2>
21     <p>文章正文</p>
22     <h2>文章标题</h2>
23     <p>文章正文</p>
24     <h2>文章标题</h2>
25     <p>文章正文</p>
26 </body>
27 </html>

 

3、nth-child和only-child选择器

nth-child选择器:

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <!--
 7         nth-child(n)
 8         an+β
 9     -->
10     <style>
11         li:nth-child(4n+1){
12             background-color: gold;
13         }
14         li:nth-child(4n+2){
15             background-color: darkgreen;
16         }
17         li:nth-child(4n+3){
18             background-color: red;
19         }
20         li:nth-child(4n){
21             background-color: blue;
22         }
23     </style>
24 </head>
25 <body>
26     <ul>
27         <li>列表1</li>
28         <li>列表2</li>
29         <li>列表3</li>
30         <li>列表4</li>
31         <li>列表1</li>
32         <li>列表2</li>
33         <li>列表3</li>
34         <li>列表4</li>
35         <li>列表1</li>
36         <li>列表2</li>
37         <li>列表3</li>
38         <li>列表4</li>
39         <li>列表1</li>
40         <li>列表2</li>
41         <li>列表3</li>
42         <li>列表4</li>
43     </ul>
44 </body>
45 </html>

 

only-child选择器:

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style>
 7         /*以下语句,列表1,2和3都会被改变颜色*/
 8         /*li:nth-child(1){*/
 9             /*background-color: aqua;*/
10         /*}*/
11         /*以下语句,只有列表1和2会被改变颜色*/
12         /*即只有1个子元素时,会起作用*/
13         li:only-child{
14             background-color: gold;
15         }
16     </style>
17 </head>
18 <body>
19     <ul>
20         <li>列表1</li>
21     </ul>
22     <ul>
23         <li>列表2</li>
24     </ul>
25     <ul>
26         <li>列表3</li>
27         <li>列表4</li>
28         <li>列表5</li>
29     </ul>
30 </body>
31 </html>

 

你可能感兴趣的:([CSS3] 学习笔记-选择器详解(二))