美文网首页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选择符】后代选择符

    相关文章

      网友评论

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

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