CSS3教程

当前位置: HTML5技术网 > CSS3教程 > CSS3每日一练之选择器-结构性伪类选择器[二]

CSS3每日一练之选择器-结构性伪类选择器[二]

        继续为大家献上CSS3选择器教程,本节同样介绍四种结构性伪类选择器。

:first-child选择器和:last-child选择器
  之所以将这两个选择器放到一起来讲,是因为它们非常相似,前者表示单独选择某类元素的第一个元素,后者表示单独选择某类元素的最后一个元素。
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>CSS3每日一练之选择器-结构性伪类选择器[二] | 前端开发网(W3Cfuns.com)!</title>
  6.         <style type="text/css">
  7.                 *{margin:0; padding:0;}
  8.                 #list{font-family:"Microsoft yahei"; font-size:14px;}
  9.                 #list li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
  10.                 #list li:first-child{color:#000; background:#fff;}/*选择#list的第一个子元素li*/
  11.                 #list li:last-child{color:#666; background:#dfdfdf;}/*选择#list的最后一个子元素li*/
  12.         </style>
  13.     </head>
  14.    
  15.     <body>
  16.         <ul id="list">
  17.                 <li>选项一 | 前端开发网(W3Cfuns.com)!</li>
  18.                 <li>选项二 | 前端开发网(W3Cfuns.com)!</li>
  19.                 <li>选项三 | 前端开发网(W3Cfuns.com)!</li>
  20.                 <li>选项四 | 前端开发网(W3Cfuns.com)!</li>
  21.                 <li>选项五 | 前端开发网(W3Cfuns.com)!</li>
  22.         </ul>
  23.     </body>
  24. </html>
:nth-child选择器和:nth-last-child选择器
  学会前两个结构性伪类选择器后,我们知道它们可以选择第一个和最后一个子元素,可是又有新的问题了,有的时候我是选择列表中的其中任何一个子元素该怎么办呢?
  比如我想选择列表中的第二个子元素li,那么只需要li:nth-child(2){}即可,如果想要选择倒数第二个子元素li,那么只需要li:nth-last-child(2){}即可,案例如下:
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta charset="gb2312">
  5.         <title>CSS3每日一练之选择器-结构性伪类选择器[二] | 前端开发网(W3Cfuns.com)!</title>
  6.         <style type="text/css">
  7.                 *{margin:0; padding:0;}
  8.                 #list{font-family:"Microsoft yahei"; font-size:14px;}
  9.                 #list li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
  10.                 #list li:nth-child(2){color:#000; background:#fff;}/*选择#list的第二个子元素li*/
  11.                 #list li:nth-last-child(2){color:#666; background:#dfdfdf;}/*选择#list的倒数第二个子元素li*/
  12.         </style>
  13.     </head>
  14.    
  15.     <body>
  16.         <ul id="list">
  17.                 <li>选项一 | 前端开发网(W3Cfuns.com)!</li>
  18.                 <li>选项二 | 前端开发网(W3Cfuns.com)!</li>
  19.                 <li>选项三 | 前端开发网(W3Cfuns.com)!</li>
  20.                 <li>选项四 | 前端开发网(W3Cfuns.com)!</li>
  21.                 <li>选项五 | 前端开发网(W3Cfuns.com)!</li>
  22.         </ul>
  23.     </body>
  24. </html>

【CSS3每日一练之选择器-结构性伪类选择器[二]】相关文章

1. CSS3每日一练之选择器-结构性伪类选择器[三]

2. CSS3每日一练之选择器-结构性伪类选择器[二]

3. CSS3每日一练之选择器-结构性伪类选择器[一]

4. CSS3每日一练之选择器-结构性伪类选择器[六]

5. CSS3每日一练之选择器-结构性伪类选择器[五]

6. CSS3每日一练之选择器-结构性伪类选择器[四]

7. CSS3每日一练之选择器-状态伪类选择器[五]

8. CSS3每日一练之选择器-状态伪类选择器[四]

9. CSS3每日一练之选择器-状态伪类选择器[三]

10. CSS3每日一练之选择器-状态伪类选择器[二]

本文来源:https://www.51html5.com/a857.html

点击展开全部

﹝CSS3每日一练之选择器-结构性伪类选择器[二]﹞相关内容

「CSS3每日一练之选择器-结构性伪类选择器[二]」相关专题

其它栏目

也许您还喜欢