css中的选择器(3)

46 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第5天,点击查看活动详情
之前学习过标签选择器、类选择器id选择器,今天继续了解其他选择器。

群组选择器

在css中对html中需要应用相同css样式的元素筛选出来,选择器命名为这些元素标签名且各个标签名之间用逗号分隔开,例如:html中有div,p,h1三个标签,现在需要对这三个标签设置同样的字体颜色和背景颜色

1. 使用标签选择器实现:

image.png

2. 使用类选择器实现:

image.png

3. 使用群组选择器实现:

在上面的三种方法里,第一种方法需要css部分书写12行;第二种方法需要css部分4行外加对每一个html元素加上class标签;第三种方法需要在css中把对应的标签名称书写下来用逗号隔开,然后定义属性。
显然,对多个html标签应用相同css样式时,群组选择器的代码长度更短,也更方便理解,值得优先考虑。

包含选择器

对html中有父子关系的元素组合中的子元素设置css样式时可以使用这个选择器,此时css选择器应写为父元素标签名+空格+子元素标签名,例如:在一个一级标题中有一部分文字要用红色蓝底被标出,此时一级标题(父)与红色蓝底字(子)就有了父子关系,可以写成下图格式: image.png

上图案例中,h1与span之间有父子关系,选择出span并设置样式的这个选择器也被叫做后代选择器
css在选择出这个span标签并加上样式的过程:先在html中寻找span,在找到的span中再寻找有h1包裹着的span,并对其增加css样式。