【CSS 教程系列第 11 篇】什么是 CSS 中的交集选择器

这是【CSS 教程系列第 11 篇】，如果觉得有用的话，欢迎关注专栏。

CSS 的选择器有很多，常用的有 元素选择器、id 选择器、class 选择器、后代选择器、子代选择器、并集选择器、交集选择器、伪类选择器、通配符选择器 等。

本篇博客说的是交集选择器，详细内容如下

一：交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为 class 选择器，两个选择器之间不能有空格。

说明
交集选择器你可以理解为"并且"的意思，或者"既…又…"的意思。在实际开发中，用的相对较少，而且也不推荐使用，本篇博客仅做了解即可。

1：举例说明

HTML 代码如下

	<div class="myClass">积一时之跬步，臻千里之遥程</div>
	<p class="myClass">学习与坐禅相似，须有一颗恒心</p>

CSS 代码如下

	.myClass {color: blue;}

这段代码运行后，div 和 p 的文本颜色都会变成蓝色，浏览器运行效果如下

题目要求
假如现在我们用交集选择器，只让 div 的文本颜色设置为蓝色，而 p 元素的文本颜色不变，如何实现呢 ？

分析
按照交集选择器的写法，第一个选择器是标签选择器，第二个是 class 选择器，中间不能有空格，所以

修改后的 CSS 代码如下

	div.myClass {color: blue;}

浏览器运行效果如下

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

---

结束语

技术是一点一点积累的，大神也不是一天就可以达到的。原地不动就是退步，所以每天进步一点点。

最后，附上一句格言："好学若饥，谦卑若愚"，望共勉。