CSS复合选择器之子元素选择器与并集选择器

最新推荐文章于 2024-04-09 17:03:03 发布

不想秃头的小魏

最新推荐文章于 2024-04-09 17:03:03 发布

阅读量442

点赞数 1

文章标签： css 前端 html

本文链接：https://blog.csdn.net/qq_45739910/article/details/127102976

版权

1.子选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。通常使用 > ，语法：元素 1 > 元素 2 {样式声明}.

    <style>
        /* 子选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素。 */
        .nav>a {
            color: red;
        }

        /* div>a {
            color: red;
        }         等同于上面的写法.   */
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是儿子</a>
        <p>
            <a href="#">我是孙子</a>
        </p>
    </div>
</body>

2. 并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。

并集选择器通常使用逗号 ( , ) 连接而成，语法：元素 1，元素 2 {样式声明} 。

   <style>
        /* 要求1: 请把熊大和熊二改为粉色 */
        div,
        p {
            color: pink;
        }

        /* 要求2: 请把熊大和熊二改为粉色  还有 小猪一家改为粉色 */
        div,
        p,
        .pig>li {
            color: pink;
        }
        /* 约定的语法规范,我们并集选择器喜欢竖着写 */
        /* 最后一个选择器  不需要加逗号 */
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩琪</li>
        <li>猪爸爸</li>
        <li>猪妈妈</li>
    </ul>
</body>