HTML5中CSS3的结构伪类选择器

来源：互联网发布：第三方打电话软件编辑：程序博客网时间：2024/06/01 16:12

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>

0 0