码迷,mamicode.com
首页 > Web开发 > 详细

1-2:CSS3课程入门之结构选择

时间:2017-09-23 13:39:21      阅读:218      评论:0      收藏:0      [点我收藏+]

标签:com   doc   css3   有一个   char   add   har   lin   区别   

E:nth-child(n)  表示E父元素中的第n个字节点
p:nth-child(odd){background:red}/*匹配奇数行*/
p:nth-child(even){background:red}/*匹配偶数行*/
p:nth-child(2n){background:red}
E:nth-last-child(n) 表示E父元素中的第n个字节点,从后向前计算
E:nth-of-type(n)  表示E父元素中的第n个字节点,且类型为E
E:nth-last-of-type(n)表示E父元素中的第n个字节点,且类型为E,从后向前计算 【先理解nth-of-type(n)
E:empty 表示E元素中没有子节点。注意:子节点包含文本节点 ,例如<p></p>不能存在空格
E:first-child 表示E元素中的第一个子节点
E:last-child 表示E元素中的最后一个子节点
E:first-of-type 表示E父元素中的第一个子节点且节点类型是E的
E:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的
E:only-child表示E元素的父元素只有一个子节点。注意:子节点不包含文本节点,【<div><b></b></div> b:only-child
E:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点【
<p><span>123</span><a href="">456</a></p>
p *:only-of-type
/*父级下某类型的标签仅有一个时该唯一元素会被选中*/

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>last-of-type与last-child区别</title>
    <style>
        *{margin:0; padding:0;}
        body *:last-of-type{
            height:30px;
            line-height:30px;
            border:1px solid red;
            background:yellow;
            margin-bottom:5px;
        }
       
    </style>
    </head>
<body>
   <p>001</p>
   <h5>111</h5>
   <p>002</p>
   <p>003</p>
   <h5>222</h5>
   <p>004</p>
   <p>005</p>
</body>
</html>

 

1-2:CSS3课程入门之结构选择

标签:com   doc   css3   有一个   char   add   har   lin   区别   

原文地址:http://www.cnblogs.com/jewave/p/7580672.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!