div与p的各种选择器

最新推荐文章于 2023-06-10 15:28:12 发布

就想糊糊涂涂

最新推荐文章于 2023-06-10 15:28:12 发布

阅读量3.7k

点赞数 5

分类专栏：前端基础文章标签： css

本文链接：https://blog.csdn.net/qq_45626944/article/details/109228935

版权

前端基础专栏收录该内容

25 篇文章 0 订阅

订阅专栏

本文详细解析了CSS选择器的四种用法：div空格p选择所有包含在div内的p元素；div>p仅选择div的直接子元素p；div+p选取div后面紧邻的第一个p元素；div~p则选择div之后的所有p元素。通过实例代码展示了它们在网页布局和样式控制中的具体应用。

摘要由CSDN通过智能技术生成

1.div空格p:表示选择div中所有的p

<html>
    <head>
        <title>
            小朋友
        </title>
        <style>
            div p{
                background-color: darkorange;
                color:aliceblue;

            }
        </style>
    
    </head>
    <body>
        <p>Hello1</p>
        <p>Hello2</p>
        <div>
            <p>Hello3</p>
            <p>Hello4</p>
            <span><p>hello5</p></span>
        </div>
        <p>Hello6</p>
        <p>Hello7</p>
    </body>
</html>

div空格p

2.div>p:只选择div的直系子女

<html>
    <head>
        <title>
            小朋友
        </title>
        <style>
            div>p{
                background-color: darkorange;
                color:aliceblue;

            }
        </style>
    
    </head>
    <body>
        <p>Hello1</p>
        <p>Hello2</p>
        <div>
            <p>Hello3</p>
            <p>Hello4</p>
            <span><p>hello5</p></span>
        </div>
        <p>Hello6</p>
        <p>Hello7</p>
    </body>
</html>

div>p
3.div+p:只选择之后的第一个p

<html>
    <head>
        <title>
            小朋友
        </title>
        <style>
            div+p{
                background-color: darkorange;
                color:aliceblue;

            }
        </style>
    
    </head>
    <body>
        <p>Hello1</p>
        <p>Hello2</p>
        <div>
            <p>Hello3</p>
            <p>Hello4</p>
            <span><p>hello5</p></span>
        </div>
        <p>Hello6</p>
        <p>Hello7</p>
    </body>
</html>

div+p
4.div~p:选择div之后所有的p

<html>
    <head>
        <title>
            小朋友
        </title>
        <style>
            div~p{
                background-color: darkorange;
                color:aliceblue;

            }
        </style>
    
    </head>
    <body>
        <p>Hello1</p>
        <p>Hello2</p>
        <div>
            <p>Hello3</p>
            <p>Hello4</p>
            <span><p>hello5</p></span>
        </div>
        <p>Hello6</p>
        <p>Hello7</p>
    </body>
</html>

div~p