CSS3教程

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

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

       看如下代码,我们有3个UL列表,这三个列表中分别包含1个子元素LI、2个子元素LI和多个子元素LI,现在我们要选择只有1个子元素LI的元素,该如何做呢?
  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.                 ul{margin-bottom:20px; font-family:"Microsoft yahei"; font-size:14px;}
  9.                 ul li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
  10.                 ul li:nth-child(1):nth-last-child(1){background:#900;}
  11.         </style>
  12.     </head>
  13.    
  14.     <body>
  15.         <ul>
  16.             <li>选项01 | 前端开发网(W3Cfuns.com)!</li>
  17.         </ul>
  18.         
  19.         <ul>
  20.             <li>选项01 | 前端开发网(W3Cfuns.com)!</li>
  21.             <li>选项02 | 前端开发网(W3Cfuns.com)!</li>
  22.         </ul>
  23.         <ul>
  24.             <li>选项01 | 前端开发网(W3Cfuns.com)!</li>
  25.             <li>选项02 | 前端开发网(W3Cfuns.com)!</li>
  26.             <li>选项03 | 前端开发网(W3Cfuns.com)!</li>
  27.             <li>选项04 | 前端开发网(W3Cfuns.com)!</li>
  28.             <li>选项05 | 前端开发网(W3Cfuns.com)!</li>
  29.             <li>选项06 | 前端开发网(W3Cfuns.com)!</li>
  30.             <li>选项07 | 前端开发网(W3Cfuns.com)!</li>
  31.             <li>选项08 | 前端开发网(W3Cfuns.com)!</li>
  32.             <li>选项09 | 前端开发网(W3Cfuns.com)!</li>
  33.             <li>选项10 | 前端开发网(W3Cfuns.com)!</li>
  34.             <li>选项11 | 前端开发网(W3Cfuns.com)!</li>
  35.             <li>选项12 | 前端开发网(W3Cfuns.com)!</li>
  36.         </ul>
  37.     </body>
  38. </html>

  我们可以结合之前学习的nth-child和nth-last-child选择器并且将索引都设置为1即可,如下代码:
  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.                 ul{margin-bottom:20px; font-family:"Microsoft yahei"; font-size:14px;}
  9.                 ul li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
  10.                 ul li:nth-child(1):nth-last-child(1){background:#900;}
  11.         </style>
  12.     </head>
  13.    
  14.     <body>
  15.         <ul>
  16.             <li>选项01 | 前端开发网(W3Cfuns.com)!</li>
  17.         </ul>
  18.         
  19.         <ul>
  20.             <li>选项01 | 前端开发网(W3Cfuns.com)!</li>
  21.             <li>选项02 | 前端开发网(W3Cfuns.com)!</li>
  22.         </ul>
  23.         <ul>
  24.             <li>选项01 | 前端开发网(W3Cfuns.com)!</li>
  25.             <li>选项02 | 前端开发网(W3Cfuns.com)!</li>
  26.             <li>选项03 | 前端开发网(W3Cfuns.com)!</li>
  27.             <li>选项04 | 前端开发网(W3Cfuns.com)!</li>
  28.             <li>选项05 | 前端开发网(W3Cfuns.com)!</li>
  29.             <li>选项06 | 前端开发网(W3Cfuns.com)!</li>
  30.             <li>选项07 | 前端开发网(W3Cfuns.com)!</li>
  31.             <li>选项08 | 前端开发网(W3Cfuns.com)!</li>
  32.             <li>选项09 | 前端开发网(W3Cfuns.com)!</li>
  33.             <li>选项10 | 前端开发网(W3Cfuns.com)!</li>
  34.             <li>选项11 | 前端开发网(W3Cfuns.com)!</li>
  35.             <li>选项12 | 前端开发网(W3Cfuns.com)!</li>
  36.         </ul>
  37.     </body>
  38. </html>

其实我们还有更简单的方法,那就是only-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.                 ul{margin-bottom:20px; font-family:"Microsoft yahei"; font-size:14px;}
  9.                 ul li{width:300px; height:30px; line-height:30px; text-align:center; color:#fff; background:#000; list-style:none;}
  10.                 ul li:only-child{background:#900;}
  11.         </style>
  12.     </head>
  13.    
  14.     <body>
  15.         <ul>
  16.             <li>选项01 | 前端开发网(W3Cfuns.com)!</li>
  17.         </ul>
  18.         
  19.         <ul>
  20.             <li>选项01 | 前端开发网(W3Cfuns.com)!</li>
  21.             <li>选项02 | 前端开发网(W3Cfuns.com)!</li>
  22.         </ul>
  23.         <ul>
  24.             <li>选项01 | 前端开发网(W3Cfuns.com)!</li>
  25.             <li>选项02 | 前端开发网(W3Cfuns.com)!</li>
  26.             <li>选项03 | 前端开发网(W3Cfuns.com)!</li>
  27.             <li>选项04 | 前端开发网(W3Cfuns.com)!</li>
  28.             <li>选项05 | 前端开发网(W3Cfuns.com)!</li>
  29.             <li>选项06 | 前端开发网(W3Cfuns.com)!</li>
  30.             <li>选项07 | 前端开发网(W3Cfuns.com)!</li>
  31.             <li>选项08 | 前端开发网(W3Cfuns.com)!</li>
  32.             <li>选项09 | 前端开发网(W3Cfuns.com)!</li>
  33.             <li>选项10 | 前端开发网(W3Cfuns.com)!</li>
  34.             <li>选项11 | 前端开发网(W3Cfuns.com)!</li>
  35.             <li>选项12 | 前端开发网(W3Cfuns.com)!</li>
  36.         </ul>
  37.     </body>
  38. </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/a872.html

点击展开全部

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

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

其它栏目

也许您还喜欢