|
利用first-child、last-child,nth-child和nth-last-child能够特别针对一个父元素中的第一个子元素、最后一个子元素、指定序号的系元素，甚至第偶数个或第奇数个子元素进行样式的指定。 first-child:子元素中的第一个元素 last-child-child:子元素中的最后一个元素 nth-child() 选择器，该选择器选取父元素的第 N 个子元素，与类型无关。 nth-child(postition),postition代表当前的个数,顺序是从上之下 nth-last-child(postition),postition代表当前的个数,顺序是从下之上 nth-child(odd||even奇数偶数进行判断) nth-last-child(odd||even奇数偶数进行判断) odd：奇数 even：偶数 - <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>CSS3选择器：first-child、last-child、nth-child 和 nth-last-child</title>
-
- <style>
- li:first-child {
- background-color: yellow;
- }
- li:last-child {
- background-color: blue;
- }
- li:nth-child(3){
- background-color: firebrick;
- }
- li:nth-last-child(2) {
- background-color: darkgreen;
- }
- li:nth-child(even) {
- background-color: darkgreen;
- }
- </style>
-
- </head>
- <body>
-
- <h2>列表</h2>
-
-
- <ul>
-
- <li>列表1</li>
-
-
- <li>列表2</li>
-
-
- <li>列表3</li>
-
-
- <li>列表4</li>
-
-
- <li>列表5</li>
-
-
- <li>列表6</li>
-
- </ul>
-
- </body>
- </html>
| 
发表于 2015-12-30 18:26:21