likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 11

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

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

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

一:交集选择器

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

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

1:举例说明

HTML 代码如下

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

CSS 代码如下

	.myClass {color: blue;}

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

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

题目要求

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

分析

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

修改后的 CSS 代码如下

	div.myClass {color: blue;}

浏览器运行效果如下

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

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

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


结束语

技术是一点一点积累的,大神也不是一天就可以达到的。原地不动就是退步,所以每天进步一点点。 最后,附上一句格言:"好学若饥,谦卑若愚",望共勉。