您的位置：首页 > Web前端 > CSS

CSS交集选择器

2018-01-29 14:40 239 查看

转载自：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类才会被选择器选中，如下图所示：

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

注意：

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

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航