一段代码学会CSS交集选择器和并集选择器

1、交集选择器是and;
2、并集选择器是or;
3、交集选择器只能交2个,其中第1个是标记,第2个是类选择器或者ID选择器,之间不能有空格,形如:h2.special;
4、并集选择器可多个,中间用“,”隔开;

下面的代码演示了两种选择器的作用(实际运行效果见上图)。

<!--以下为CSS代码部分-->
<style type="">
/*一个并集选择器*/
    h1,h2,h3,p{
    font-size:12px;
    color:green;
    }    
/*并集选择器内依次有交集选择器(h2.special)、类选择器(special)、ID选择器(#one)*/
    h2.special,.special,#one{
    text-decoration: underline;
    color: red;
    }
/*交集选择器*/
    h2.special{
    color:blue;
    font-size: 30px
    }
</style>
<!--以下为html代码部分-->
<body>
    <h2>示例文字000</h2><!--应用于上方的并集选择器,绿字-->
    <h2 class="special">示例文字001</h2><!--应用于下方交集选择器,交集选择器和并集选择器重复定义的内容,以交集选择器为准,下划线,蓝色大字,而不是红色-->
    <p class="special">示例文字002</p><!--体现并集选择器中的类选择器,下划线,并集选择器优先级低于类选择器,所以不是绿字,是红字-->
    <h4 id="one">示例文字003</h4><!--体现并集选择器中的ID选择器,下划线,红字-->
    <h4>示例文字004</h4><!--参照组-->
</body>
原文地址:https://www.cnblogs.com/roytanlu/p/2483535.html