nth-of-type选择器

最新推荐文章于 2025-10-09 23:12:11 发布

原创最新推荐文章于 2025-10-09 23:12:11 发布 · 318 阅读

0 ·

CC 4.0 BY-SA版权

响应式专栏收录该内容

33 篇文章

订阅专栏

本文通过一个具体的HTML页面示例展示了CSS选择器的应用方法，包括基本的选择器如类选择器、标签选择器以及更复杂的选择器如:nth-child()等。通过对这些选择器的学习和实践，可以帮助读者更好地理解和掌握如何使用CSS来精确地定位并设置网页元素的样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        p{
            background: blue;
            width: 50px;
            height: 50px;
        }
        h4{width: 50px;height: 50px;background: yellow;}
        .box p:nth-child(3){
            background: red;
        }
        /* .box p:nth-of-type(3){
            background: pink;
        } */
    </style>
</head>
<body>
    <div class="box">
        <p></p>
        <p></p>
        <h4></h4>
        <div></div>
        <p></p>
        <p></p>
        <p></p>
    </div>
    <h3>分割线</h3>
    <div class="box">
        <p></p>
        <p></p>
        <p></p>
        <p></p>
        <p></p>
    </div>
</body>
</html>