前端学习之CSS——（5）

最新推荐文章于 2024-07-24 10:40:52 发布

努力编程的阿曼

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量22

点赞数

分类专栏：前端学习文章标签：前端学习 css

本文链接：https://blog.csdn.net/qq_62965644/article/details/132723022

版权

前端学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、结构伪类选择器

伪类：就是进行一定的条件判断达到类选择的效果，以下是一些伪类选择器的示例，重在理解，不必特别记忆

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ul第一个元素 */
        ul li:first-child{
            background-color: aqua;
        }
        /* ul最后一个元素 */
        ul li:last-child{
            background-color: blanchedalmond;
        }
    </style>
</head>
<body>
    <p>p0</p>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            li1
        </li>
        <li>
            li2
        </li>
        <li>
            li3
        </li>
    </ul>
    <p>p4</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ul第一个元素 */
        ul li:first-child{
            background-color: aqua;
        }
        /* ul最后一个元素 */
        ul li:last-child{
            background-color: blanchedalmond;
        }
        /* 选中p1 ,定位父元素，选择第一个元素
        选择当前p元素的父元素，选择父级元素的第一个，并且是当前元素才能生效
        括号中的数字n表示第n个元素也必须是p标签的子元素*/
        p:nth-child(1){
            background-color: beige;
        }
    </style>
</head>
<body>
    <p>p0</p>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            li1
        </li>
        <li>
            li2
        </li>
        <li>
            li3
        </li>
    </ul>
    <p>p4</p>
</body>
</html>

修改body后

<body>
    <h1>hh</h1>
    <p>p0</p>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            li1
        </li>
        <li>
            li2
        </li>
        <li>
            li3
        </li>
    </ul>
    <p>p4</p>
</body>

或者css为

        p:nth-child(100){
            background-color: beige;
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ul第一个元素 */
        ul li:first-child{
            background-color: aqua;
        }
        /* ul最后一个元素 */
        ul li:last-child{
            background-color: blanchedalmond;
        }
        /* 选中p1 ,定位父元素，选择第一个元素
        选择当前p元素的父元素，选择父级元素的第一个，并且是当前元素才能生效
        括号中的数字n表示第n个元素也必须是p标签的子元素*/
        p:nth-child(100){
            background-color: beige;
        }
        /* 选中父元素下的p元素的第二个 */
        p:nth-of-type(2){
            background-color: yellow;
        }
    </style>
</head>
<body>
    <h1>h</h1>
    <p>p0</p>
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>
            li1
        </li>
        <li>
            li2
        </li>
        <li>
            li3
        </li>
    </ul>
    <p>p4</p>
</body>
</html>