音效素材网提供各类素材,打造精品素材网站!

站内导航 站长工具 投稿中心 手机访问

音效素材

CSS优先级计算的规则
日期:2021-09-06 11:41:36   来源:脚本之家

最近在学习CSS优先级计算的规则这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。

CSS的权重

一、CSS的引入方式  

1.在节点元素上,使用style属性  

2.通过link引入外部文件  

3.通过style标签在页面内引入

三种引入方式的区别

index.html文件

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="body.css">
        <style type="text/css">
            body {
                background: red;
            }
        </style>
    </head>
    <body style="background: yellow;">
    </body>
    </html>

body.css文件

    body {
        background: green;
    }

1.第一种方式相对后面两种优先级高,与引入顺序无关 无论link和style标签放在head内,还是放在body内,或者放在html标签结尾,页面都会呈现yellow

2.第二种和第三种为平级引入,后引入的样式覆盖之前的引入样式 去掉body上的style标签  

调整link和style标签的先后顺序。link在前,style标签在后,页面呈现red,相反,页面会呈现green

二、获取节点的方式  

1.id  

2.class  

3.标签  

4.属性

id

在一个页面中id值应该是唯一,但是,当出现多个相同id时,样式对所有id节点是有效的,使用方式:#后面跟节点id值

<body>
  <p id="id_p">第一个段落</p>
  <p id="id_p">第二个段落</p>
</body>
#id_p {
  color: red;
}

结果显示,两个段落中的文字都呈现red  

1.id相对class和标签具有更高的权重,当id和class、标签同时对一个节点设置样式时,id的权重为最高  

2.通过link和style标签对同一个id设置样式时,后引入的样式覆盖之前的样式

class

使用class可以对多个节点同时设置样式,并且可以叠加class使用。使用方式.后面跟节点单个class名

<body>
  <p class="class-p">第一个段落</p>
  <p class="class-p class-p-2">第二个段落</p>
</body>
.class-p {
  color: red;
}
.class-p-2 {
  color: green;
}

此时,第一个段落呈现red,第二个段落呈现green

调整html

<body>
  <p class="class-p">第一个段落</p>
  <p class="class-p-2 class-p">第二个段落</p><!-- 调换class-p 和 class-p-2 的顺序  -->
</body>

调整class-p和class-p-2的位置后,页面呈现效果不变。说明:class样式的渲染和class的使用顺序无关,与class样式设置的先后顺序有关,同权重的class样式,在样式设置中,靠后的样式设置覆盖之前的样式设置

属性

通过节点上的属性也可以得到要进行样式设置的节点

<body>
  <p>第一个段落</p>
  <p title="第二个段落的title">第二个段落</p>
</body>
[title] {
  color: red;
}

第二个段落有title属性,所以第二个段落呈现red

标签

通过标签名获取节点进行样式设置

<body>
  <p>第一个段落</p>
  <p>第二个段落</p>
</body>
p {
  color: red;
}

页面中所有p标签节点呈现red

混合

以上四种方式可以混合使用,对相应的节点进行样式设置。结合方式包括层级嵌套、样式叠加、节点关联等。最终以权重高者为呈现效果。

三、样式权重

以上四种方式,针对单个而言,id最高,class和属性同级(后面的样式覆盖之前的样式),标签最低。

当四种方式混合使用时,则以权重的结果为准。对同一结点存在的id、class、属性和标签样式进行排序,排位第一者为最终呈现效果。例如:对于节点p存在多种类型的样式设置,首先挑选所有带id的样式,包括嵌套样式。相同id下,对另一类型样式进行排序

<body class="body">
  <p id="id_p">第一个段落</p>
</body>

 

.body #id_p {
  color: red;
}

#id_p {
  color: green
}

虽然两种样式设置都有id,并且green效果在red之后被设置,但是通过排序可以得到相同#id_p下,前一个存在.body,所以最终呈现效果为red

存在class、属性和标签的样式时,依次排序,同类型或同权重(class和属性同权重)的样式,靠后的样式覆盖之前的样式(以类型为准,不以名称为准),最终排位第一者为最终呈现效果。

注意:  

1.嵌套、叠加、>、 +等方式,不会影响最终效果。  

2.:nth-child、:first-child、:last-child等伪类高于class和属性

四、!important

!important为样式中的特例,它的权重为最高,高于id、class、属性、标签以及style属性

<body class="body" style="background: red"></body>
.body {
  background: green !important;
}

页面呈现效果为green。但是当对样式设置进行排序时,仍然是同类型样式下,以另一类型权重高者为最终效果。例如

body.body {
  background: blue !important;
}
.body {
  background: green !important;
}

相同class及!important下,前一种样式设置存在body标签,后一种则没有,所以最终效果呈现blue

说明

1.尽量避免使用!important。因为!important权重最高,会对节点的该属性做强制性设置,在使用时要慎重

2.使用场景

  • 引入插件时,对插件中的样式进行强覆盖。当引入插件时,在不想修改插件中的样式代码情况下,可通过!important对插件内的样式属性进行强制复写
  • 对行内样式进行强覆盖。对于自动生成或者动态引入的的带有行内样式html结构时,可以通过!important对行内样式进行强制复写

1.变通

!important在很多时候是不建议使用的,在stylelint中有一项规则即禁止使用!important。有一种变通的方式,可以在多数情况下实现类似!important`的效果

html <body class="body"> <p class="p"> <span class="span">一段文本</span> </p> </body>

css .body .p .span { color: red; } .span.span.span.span.span {/** 自身样式叠加 **/ color: green; }

在不考虑行内样式和id的情况下,对自身样式进行重复叠加多次使用,可以增加class权重,对样式进行复写。

使用前提:  

1.没有行内样式style属性  

2.没有id样式  

3.自身样式叠加次数多余嵌套个数

好处:不用考虑DOM层级关系,减少层级嵌套

五、总结

综合以上说明,权重的计算基本遵从以下规则:  

1.按类型比对,类型权重高者显示;  

2.同类型,按数量比对,多者显示;  

3.同数量,按先后顺序比对,后者显示

嵌套的使用建议

样式嵌套使用,除了增加权重外,也体现了DOM的某种结构关系。但嵌套并不是在任何情况下都需要的。

  1. 嵌套多用于块内独有的样式设置。某种样式仅在某个块内有效,可使用嵌套。
  2. 多个页面同时开发时,为避免合并后样式被覆盖,可使用嵌套。

嵌套的使用并不是越多越好。嵌套越多,权重越大,但同时对页面的性能消耗也越大。建议使用继承和样式叠加。  

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

    您感兴趣的教程

    在docker中安装mysql详解

    本篇文章主要介绍了在docker中安装mysql详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编...

    详解 安装 docker mysql

    win10中文输入法仅在桌面显示怎么办?

    win10中文输入法仅在桌面显示怎么办?

    win10系统使用搜狗,QQ输入法只有在显示桌面的时候才出来,在使用其他程序输入框里面却只能输入字母数字,win10中...

    win10 中文输入法

    一分钟掌握linux系统目录结构

    这篇文章主要介绍了linux系统目录结构,通过结构图和多张表格了解linux系统目录结构,感兴趣的小伙伴们可以参考一...

    结构 目录 系统 linux

    PHP程序员玩转Linux系列 Linux和Windows安装

    这篇文章主要为大家详细介绍了PHP程序员玩转Linux系列文章,Linux和Windows安装nginx教程,具有一定的参考价值,感兴趣...

    玩转 程序员 安装 系列 PHP

    win10怎么安装杜比音效Doby V4.1 win10安装杜

    第四代杜比®家庭影院®技术包含了一整套协同工作的技术,让PC 发出清晰的环绕声同时第四代杜比家庭影院技术...

    win10杜比音效

    纯CSS实现iOS风格打开关闭选择框功能

    这篇文章主要介绍了纯CSS实现iOS风格打开关闭选择框,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作...

    css ios c

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的办法

    Win7如何给C盘扩容 Win7系统电脑C盘扩容的

    Win7给电脑C盘扩容的办法大家知道吗?当系统分区C盘空间不足时,就需要给它扩容了,如果不管,C盘没有足够的空间...

    Win7 C盘 扩容

    百度推广竞品词的投放策略

    SEM是基于关键词搜索的营销活动。作为推广人员,我们所做的工作,就是打理成千上万的关键词,关注它们的质量度...

    百度推广 竞品词

    Visual Studio Code(vscode) git的使用教程

    这篇文章主要介绍了详解Visual Studio Code(vscode) git的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。...

    教程 Studio Visual Code git

    七牛云储存创始人分享七牛的创立故事与

    这篇文章主要介绍了七牛云储存创始人分享七牛的创立故事与对Go语言的应用,七牛选用Go语言这门新兴的编程语言进行...

    七牛 Go语言

    Win10预览版Mobile 10547即将发布 9月19日上午

    微软副总裁Gabriel Aul的Twitter透露了 Win10 Mobile预览版10536即将发布,他表示该版本已进入内部慢速版阶段,发布时间目...

    Win10 预览版

    HTML标签meta总结,HTML5 head meta 属性整理

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析HTML代码,更好地将移动web前端页面表现出来...

    移动端html5模拟长按事件的实现方法

    这篇文章主要介绍了移动端html5模拟长按事件的实现方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家...

    移动端 html5 长按

    HTML常用meta大全(推荐)

    这篇文章主要介绍了HTML常用meta大全(推荐),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参...

    cdr怎么把图片转换成位图? cdr图片转换为位图的教程

    cdr怎么把图片转换成位图? cdr图片转换为

    cdr怎么把图片转换成位图?cdr中插入的图片想要转换成位图,该怎么转换呢?下面我们就来看看cdr图片转换为位图的...

    cdr 图片 位图

    win10系统怎么录屏?win10系统自带录屏详细教程

    win10系统怎么录屏?win10系统自带录屏详细

    当我们是使用win10系统的时候,想要录制电脑上的画面,这时候有人会想到下个第三方软件,其实可以用电脑上的自带...

    win10 系统自带录屏 详细教程

    + 更多教程 +
    教程标签
    HTMLCSSDreamweaverFrontpage