【CSS选择符】群组选择符 和 通用选择符

微信订阅号:rabbit_svip

有时候我们需要一种简单的方式把相同的格式应用到不同的元素上。例如,可能想让网页中的所有标题使用相同的颜色和字体显示。如果分别为每一级标题(h1, h2, h3, h4等)定义样式,工作量会很大,如果日后要修改所有标题的颜色,要修改6个不同的样式。
遇到这种需求时,最好使用群组选择符,把一个样式指定给多个选择符。


群组选择符

群组选择符由一系列逗号分开的选择符组成。因此,如果想让所有标题都使用相同的颜色,可以编写如下规则:

CSS代码:

h1, h2, h3, h4, h5, h6 {
    color: #1574A8;
}

群组选择符中可以使用任何有效的选择符(可以多种选择符混用)。例如,把相同的文字颜色应用到<h1>标签、<p>标签、类为.copyright的标签和ID为#banner的标签上。

CSS代码:

h1, p, .copyright, #banner {
    color: #1574A8;
}

如果网页中的多个元素只要共用部分格式属性,可以使用群组选择符编写共用的那部分,再分别为各个选择符编写专属的属性。






通用选择符(星号)

通用选择符可以理解成超级群组选择符。
通用选择符的作用是选取所有标签。

比如最常用的是让所有元素的margin和padding默认为0,可以这样写:

CSS代码:

* {
    margin: 0;
    padding: 0;
}

通用选择器不指定任何具体的标签类型,因此很难预测对使用各种HTML标签的网站有什么影响。
所以通用选择器里面的样式不要写得太过分,把一些基础的东西写在里面就行。比如规定margin、padding、font-size等。

滥用通用选择符,很可能会加大浏览器的渲染压力。



HTML与CSS 目录:HTML与CSS

上一篇:【CSS选择符】类选择符 和 ID选择符

下一篇:【CSS选择符】后代选择符

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容