CSS交集选择器

转载自：http://blog.csdn.net/lianghe_work/article/details/52816267

问题引入

[html]view
plain copy

<!DOCTYPE html>  

<html lang="en">  

<head>  

    <meta charset="UTF-8">  

    <title>Document</title>  

    <style type="text/css">  

        .red{  

            color: red;  

        }  

    </style>  

</head>  

<body>  

    <h2>二级标题</h2>  

    <h2 class="red">二级标题</h2>  

    <h2 class="red">二级标题</h2>  

    <p  class="red">段落</p>  

    <p>段落</p>  

    <p>段落</p>  

</body>  

</html>

运行的结果：

我们发现只要是含有red类的标签都变红了

如果我的需求是：只能让h2且含有red类的标签变红，这是就要需要交集选择器

交集选择器

[html]view
plain copy

h2.red{  

            color: red;  

        }  

上面就是一个交集选择器的示例：就是说必须是h2标签同时拥有.red类才会被选择器选中，如下图所示：
CSS交集选择器

这时你发现第一个“段落”并没有变红，原因是他只拥有.red类，但不具备h2标签

注意：

前面讲过：后代选择器h2 .red之间有空格。

而交集选择器没有空格，紧挨着一起