结构伪类选择器

来源：互联网发布：封印者数据库编辑：程序博客网时间：2024/05/29 14:13

结构伪类选择器：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>兄弟选择符</title>    <style>        :root{            background: greenyellow;        }/*root:根元素，和给html定义的效果一样*/        *p~p{            color:red;        }/*E元素中的所有子元素*/        p:first-child{            color:blueviolet;        }/*匹配父元素的第一个子元素E*/        p:last-child{            color:blueviolet;        }/*匹配父元素的最后一个子元素E*/        p:nth-child(2){            color:blueviolet;        }/*匹配父元素的第2个子元素E*/        p:nth-last-child(2){            color:blueviolet;        }/*匹配父元素的倒数2个子元素E*/        p:first-of-type{             background:orangered;        }/*匹配同类型中的第一个同级兄弟元素E*/        p:last-of-type{            background:orangered;        }/*匹配同类型中的最后一个同级兄弟元素E*/        p:nth-of-type(2){            background:yellow;        }/*匹配同类型中的第2个同级兄弟元素E*/    </style></head><body><div>  <!--div为父元素-->    <h2>aaaaaaaaaaaaaa</h2>    <p>bbbbbbbbbbbbbb</p>    <h2>cccccccccccccc</h2>    <p>dddddddddddddd</p>    <h2>eeeeeeeeeeeeee</h2>    <p>ffffffffffffff</p>    <h2>gggggggggggggg</h2>    <p>hhhhhhhhhhhhhh</p></div></body></html>

阅读全文

0 0