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

CSS选定第k个元素

时间:2016-10-16 07:35:51      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    /*使用first-child和last-child*/
    
    p:first-child {
        color: red;
    }
    
    p:last-child {
        color: blue;
    }
    /*nth-child(参数),比较灵活,注意n表示自然数,从0,1,2,开始;nth-child(编号),编号从1开始*/
    
    p:nth-child(0) {
        color: red;
    }
    /*nth-last-child(参数)表示倒数几个元素*/
    
    p:nth-last-child(3) {
        color: green;
    }
    /*因为n从0~无穷,当n小于1时没有意义,所以下列css选定前两个元素*/
    
    p:nth-child(-n+2) {
        color: purple;
    }
    /*因为n从0~无穷,下列css选定的是1,3,5,7...元素*/
    
    p:nth-child(2n+1) {
        color: yellow;
    }
    </style>
</head>

<body>
    <p>one</p>
    <p>two</p>
    <p>three</p>
    <p>four</p>
    <p>five</p>
    <p>six</p>
</body>

</html>

 

CSS选定第k个元素

标签:

原文地址:http://www.cnblogs.com/weidiao/p/5965770.html

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