HTML5中CSS3的结构伪类选择器

CSS3结构伪类选择器：
1、E:nth-child(n)实现奇偶：
（li:nth-child(2n){color:#f00;} /* 偶数 */
li:nth-child(2n+1){color:#000;} /* 奇数 */
）
2、E:nth-last-child(n) { sRules }
（匹配父元素的倒数第n个子元素E，假设该子元素不是E，则选择符无效。）
3*、E:nth-of-type(n) { sRules }
（匹配同类型中的第n个同级兄弟元素E。）
4、E:first-child { sRules }
（匹配父元素的第一个子元素E。）
5、E:last-child { sRules }

（匹配父元素的最后一个子元素E。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        li:nth-child(2n-1){
            color: red;
        }
        li:nth-last-child(2){/*反向，倒数第二条*/
            color: yellow;
        }
        p:nth-of-type(2){
            color: red;
        }
    </style>
    <title>结构伪类选择器</title>
</head>
<body>
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
    <li>列表项4</li>
    <li>列表项5</li>
    <li>列表项6</li>
    <li>列表项7</li>
    <li>列表项8</li>
</ul>

<div>
    <p>段落1</p>
    <div>伪段落</div>
    <p>段落2</p>
    <p>段落3</p>
    <p>段落4</p>
</div>
</body>
</html>

HTML5中CSS3的结构伪类选择器

相关推荐