HTML并集，交集，子代，后代选择器

地狱火牛战士2024-05-21 11:58

1,交集选择器

他们必须满足既是 p又是.box的关系（直接连写，没有任何符号）

html 复制代码

p.box{
    color:red;
}
<div class="box"> 1 </div>
<p class="box">2</p>
<p>3</p>

2.并集选择器

将div,p,span同时设置一种样式，颜色啥的都可以设置。（中间用逗号分隔）

html 复制代码

div,p,span{
       color:red;
    }

3.后代选择器：后代泛指儿子元素，孙子元素，重孙子元素都包含在内了（中间用空格隔开）

html 复制代码

    div span{
       color:#333;
    }
    <span>span标签</span>
    <div>
    <span>这是div的儿子</span>
   </div>

4.子代选择器：只包含儿子元素（用>隔开）

html 复制代码

div>span{
       color:#333;
    }
    <span>span标签</span>
    <div>
    <span>这是div的儿子</span>
    <p>
    <span>孙子</span>
    </p>
   </div>