美文网首页Web让前端飞网页前端后台技巧(CSS+HTML)
【CSS选择符】群组选择符 和 通用选择符

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

作者: 德育处主任 | 来源:发表于2017-12-25 23:43 被阅读8次
微信订阅号: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选择符】后代选择符

相关文章

  • HTML与CSS 目录

    HTML与CSS 目录 基础知识 【CSS选择符】类型选择符【CSS选择符】类选择符 和 ID选择符【CSS选择符...

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

    有时候我们需要一种简单的方式把相同的格式应用到不同的元素上。例如,可能想让网页中的所有标题使用相同的颜色和字体显示...

  • CSS选择符

    1、通用选择符(通配符):* CSS样式 HTML代码 2、类选择符:.类名 使用之前 3、包含选择符(派生/后代...

  • 【CSS】选择符

    CSS元素选择符 优先级:id选择符 > class选择符 > 标签选择符 1.通配选择符(Universal S...

  • CSS选择符的使用

    CSS选择符常用的有这几个,后代选择符空格( ),子选择符箭头(>),相邻兄弟选择符加号(+),随后兄弟选择符波浪...

  • CSS选择器

    CSS选择符(选择器) 定义了影响文档中的哪些部分 分类: 元素选择符 关系选择符 属性选择符 伪类选择符 伪对象...

  • 组合选择符

    1、CSS 组合选择符 Note 组合选择符说明了两个选择器直接的关系。CSS组合选择符包括各种简单选择符的...

  • CSS选择符介绍

    我们都是通过CSS选择符来锁定HTML元素进行样式的修改,在CSS选择符这一节中讲到了以下几种选择符: 子选择符与...

  • CSS之基础知识开篇(一)

    1. CSS的组成 css 样式由选择符和声明组成,而声明又由属性和值组成。 1.1 选择符(选择器)选择符:又称...

  • 【CSS选择符】类型选择符

    CSS代码: 用于选取特定HTML标签的选择符,叫类型选择符或元素选择符。这种选择符的作用特别大。能把样式应用到网...

网友评论

    本文标题:【CSS选择符】群组选择符 和 通用选择符

    本文链接:https://www.haomeiwen.com/subject/zforgxtx.html