CSS复合选择器之子元素选择器与并集选择器_css添加子筛选项

作者：正经夜光杯 | 2024-07-07 15:41:42

踩

css添加子筛选项

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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/796139

CSS复合选择器之子元素选择器与并集选择器_css添加子筛选项

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

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

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