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

zoukankan html css js c++ java

CSS3每日一练之选择器-结构性伪类选择器
<!DOCTYPE HTML>

<html>

<head>

      <meta charset="gb2312">

      <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title>

      <style type="text/css">

            *{margin:0; padding:0;}

            #list{font-family:"Microsoft yahei"; font-size:14px;}

            #list dt,#list dd{height:30px; line-height:30px; text-align:center; color:#000; list-style:none;}

            #list dt:nth-child(odd){color:#fff; background:#900;}/*当前dl列表的第奇数个子元素如果是dt子元素，那么将选择它*/

            #list dt:nth-child(even){background:#090;}/*当前dl列表的第偶数个子元素如果是dt子元素，那么将选择它*/

      </style>

      </head>



      <body>

            <dl id="list">

                  <dt>前端开发网(W3Cfuns.com)!</dt>

                  <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>

                  <dt>前端开发网(W3Cfuns.com)!</dt>

                  <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>

                  <dt>前端开发网(W3Cfuns.com)!</dt>

                  <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>

                  <dt>前端开发网(W3Cfuns.com)!</dt>

                  <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>

                  <dt>前端开发网(W3Cfuns.com)!</dt>

                  <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>

            </dl>

   </body>

</html>
复制代码从上面的代码中，我们可以发现明明设置了奇数行和偶数行的dt，按道理来讲，应该是如下图这种运行效果才对：

<ignore_js_op>

　　这是因为，nth-child和nth-last-child在计算子元素是奇数行还是偶数行的时候，是连通父级元素中的所有子元素一起计算的，换句话说，dt:nth-child(odd)这句话的含义，并不是指“当前dl列表中的第奇数个dt子元素来计算”，而是指“当前dl列表的第奇数个子元素如果是dt子元素，那么将选择它”，那么这种计算方式与我们所“理解”的这种需求怎么计算呢？

nth-of-type选择器和nth-last-of-type选择器
　　这两个选择器可以避免上述的问题，CSS3在计算子元素是第奇数个还是第偶数个自元素的时候，就只针对同类型的子元素进行计算了，这两个选择器的使用方法如下所示：
<!DOCTYPE HTML>

<html>

<head>

      <meta charset="gb2312">

      <title>CSS3每日一练之选择器-结构性伪类选择器[四] | 前端开发网(W3Cfuns.com)!</title>

      <style type="text/css">

            *{margin:0; padding:0;}

            #list{font-family:"Microsoft yahei"; font-size:14px;}

            #list dt,#list dd{height:30px; line-height:30px; text-align:center; list-style:none; color:#fff;}

            #list dd{color:#000;}

            #list dt:nth-of-type(odd){background:#900;}/*奇数行*/

            #list dt:nth-of-type(even){background:#090;}/*偶数行*/

      </style>

</head>



<body>

      <dl id="list">

         <dt>前端开发网(W3Cfuns.com)!</dt>

         <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>

         <dt>前端开发网(W3Cfuns.com)!</dt>

         <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>

         <dt>前端开发网(W3Cfuns.com)!</dt>

         <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>

         <dt>前端开发网(W3Cfuns.com)!</dt>

         <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>

         <dt>前端开发网(W3Cfuns.com)!</dt>

         <dd>web前端开发起飞区，Web前端开发高手聚集地，教程、资源完全免费！</dd>

      </dl>

</body>

</html>

复制代码
查看全文

相关阅读:
React Native商城项目实战08
React Native商城项目实战07
React Native商城项目实战05
React Native商城项目实战06
React Native商城项目实战04
React Native商城项目实战03
React Native商城项目实战02
单选框input:radio
myDate97用法
 STRUTS2配置动态页面

原文地址：https://www.cnblogs.com/liweitao/p/3868072.html