CSS3教程

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

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

       我们学习了nth-child和nth-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 dt,#list dd{height:30px; line-height:30px; text-align:center; color:#000; list-style:none;}
  10.                 #list dt:nth-child(odd){color:#fff; background:#900;}/*当前dl列表的第奇数个子元素如果是dt子元素,那么将选择它*/
  11.                 #list dt:nth-child(even){background:#090;}/*当前dl列表的第偶数个子元素如果是dt子元素,那么将选择它*/
  12.         </style>
  13.         </head>
  14.    
  15.         <body>
  16.                 <dl id="list">
  17.                     <dt>前端开发网(W3Cfuns.com)!</dt>
  18.                     <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
  19.                     <dt>前端开发网(W3Cfuns.com)!</dt>
  20.                     <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
  21.                     <dt>前端开发网(W3Cfuns.com)!</dt>
  22.                     <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
  23.                     <dt>前端开发网(W3Cfuns.com)!</dt>
  24.                     <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
  25.                     <dt>前端开发网(W3Cfuns.com)!</dt>
  26.                     <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
  27.                 </dl>
  28.       </body>
  29. </html>
       从上面的代码中,我们可以发现明明设置了奇数行和偶数行的dt,按道理来讲,应该是如下图这种运行效果才对:
  这是因为,nth-child和nth-last-child在计算子元素是奇数行还是偶数行的时候,是连通父级元素中的所有子元素一起计算的,换句话说,dt:nth-child(odd)这句话的含义,并不是指“当前dl列表中的第奇数个dt子元素来计算”,而是指“当前dl列表的第奇数个子元素如果是h2子元素,那么将选择它”,那么这种计算方式与我们所“理解”的这种需求怎么计算呢?

nth-of-type选择器和nth-last-of-type选择器
  这两个选择器可以避免上述的问题,CSS3在计算子元素是第奇数个还是第偶数个自元素的时候,就只针对同类型的子元素进行计算了,这两个选择器的使用方法如下所示:
  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 dt,#list dd{height:30px; line-height:30px; text-align:center; list-style:none; color:#fff;}
  10.                 #list dd{color:#000;}
  11.                 #list dt:nth-of-type(odd){background:#900;}/*奇数行*/
  12.                 #list dt:nth-of-type(even){background:#090;}/*偶数行*/
  13.         </style>
  14.     </head>
  15.    
  16.     <body>
  17.         <dl id="list">
  18.             <dt>前端开发网(W3Cfuns.com)!</dt>
  19.             <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
  20.             <dt>前端开发网(W3Cfuns.com)!</dt>
  21.             <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
  22.             <dt>前端开发网(W3Cfuns.com)!</dt>
  23.             <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
  24.             <dt>前端开发网(W3Cfuns.com)!</dt>
  25.             <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
  26.             <dt>前端开发网(W3Cfuns.com)!</dt>
  27.             <dd>web前端开发起飞区,Web前端开发高手聚集地,教程、资源完全免费!</dd>
  28.         </dl>
  29.     </body>
  30. </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/a874.html

点击展开全部

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

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

其它栏目

也许您还喜欢