结构伪类选择器

结构伪类选择器

什么是结构伪类选择器？

什么是伪类选择器？

CSS中已经定义好的选择器,不能随便取名

什么是结构伪类选择器？

针对HTML层级结构的的伪类选择器

应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*选择p的父类的第二个元素且该元素类型为p*/
        p:nth-child(2) {
            background: #4949b3;
        }

        /*选择p的父类的类型为p的元素的第二个元素*/
        p:nth-of-type(2) {
            background: #ac49b3;
        }

        /*ul的最后一个元素*/
        ul li:last-child {
            background: red;
        }

        /*ul的第一个元素*/
        ul li:first-child {
            background: #0022ff;
        }

        /*鼠标移动到上面会变黄色*/
        a:hover {
            background: yellow;
        }
    </style>
</head>
<body>
<a href="">1231</a>
<h1>h1</h1>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<p>p4</p>
<ul>
    <li>li</li>
    <li>li</li>
    <li>li</li>
</ul>

</body>
</html>
posted @ 2022-04-14 21:52  Oh,mydream!  阅读(66)  评论(0)  编辑  收藏  举报