级联选择器
"级联选择器"用于完成"简单选择器"无法完成的选择工作。这是因为相比于"简单选择器"利用单一特征来选择元素,"级联选择器"通过把多个"简单选择器"级联在一起,从而实现元素的**多特征选择**。
简单选择器利用单一的特征来选择元素,但有时我们需要更多的特征才能定位到一个元素。比如下面这段 HTML 代码。
<div>
<p>one</p>
<p class="note">two</p>
<span class="note">three</p>
</div>
如何只选择第二个 p
元素?
用类型选择器 p
可以吗?不行,因为它不仅会选择第二个 p
元素,也会选择第一个 p
元素。
用类选择器 .note
可以吗?不行,因为它不仅会选择第二个 p
元素,也会选择 span
元素。
由此可见利用单一的特征是无法或很难只选择第二个 p
元素的。
为此我们需要在简单选择器的基础上增加一种手段,让我们可以利用多个特征来选择元素。
级联选择器就是把多个简单选择器级联在一起,从而实现元素的多特征选择。
让我们回到上面的例子。如果我们把类型特征和类特征综合起来是不是就可以选中第二个元素呢?答案是肯定的。这个新的选择器就是 p.note
,它将类型选择器 p
和类选择器 .note
级联在一起,用两个特征精确定位到第二个 p
元素。
使用级联选择器时有三点注意事项:
- 如果级联选择器包含了类型选择器或通用类型选择器,那么它们需要放在最前面。
- 级联选择器只能包含一个类型选择器或通用类型选择器。
- 级联选择器中选择器必须紧密相连,它们之间不允许出现空格或其它将它们分开的字符。
官方公众号
💯本站文章同步发表在官方公众号 ReadingHere,关注公众号您将在第一时间了解本站最新文章和资讯。
❤️欢迎您关注本站官方公众号 ReadingHere。
版权声明
本文由 ReadingHere 原创,未经 ReadingHere 授权不得转载、摘编。已经授权使用的,应在授权范围内使用,并注明来源: www.readinghere.com。违反上述声明者,ReadingHere 将追究其相关法律责任。