加入收藏 | 设为首页 | 会员中心 | 我要投稿 好传媒网 (https://www.haochuanmei.com/)- 区块链、物联平台、物联安全、数据迁移、5G!
当前位置: 首页 > 综合聚焦 > 编程要点 > 语言 > 正文

CSS样式层叠的规则

发布时间:2023-12-18 05:27:03 所属栏目:语言 来源:DaWei
导读: 这篇文章我们来了解CSS样式层叠的相关内容,在使用CSS样式层叠时,有一些规则及注意的事项是要留意的,对此本文就给大家来介绍一下,对大家学习和理解CSS样式层叠会有一定的帮助,有需要
    这篇文章我们来了解CSS样式层叠的相关内容,在使用CSS样式层叠时,有一些规则及注意的事项是要留意的,对此本文就给大家来介绍一下,对大家学习和理解CSS样式层叠会有一定的帮助,有需要的朋友可以参考,接下来就跟随小编来一起学习一下吧!

    CSS样式规则语法样式是CSS的基本单位,每个样式规则都是由选择器和声明块两个基本部分组成的。

    选择器(selector)决定为哪些元素应用样式;

    声明块定义相应的样式,它包含在一对花括号内,有一条或多条声明组成,而每一条声明则由一个属性和一个值组成,中间用冒号隔开。

    语法:
    属性名1: 属性值1;
    
    属性名2: 属性值2;
    
    属性名3: 属性值3;

    1.找到应用给每个元素和属性的所有声明

    浏览器在 加载每个页面时。都会据此查到每一条CSS规则,表示出所有受到影响的HTML元素

    2.按照顺序和权重排序

    浏览器依次检查 5个来源 ,并设定匹配的属性。如果匹配的属性在下一个来源也有定义,则更新该属性的值。

    5个来源: 1.浏览器默认样式表 2.设置浏览器字体大小来改变默认样式 3.link引用的css文件 4.style中编写的样式代码 5.行内样式

    声明权重。如下!important用于增加声明的权重。这样其他来源一概不用考虑了。

       p {color:green !important; font-size:12pt;}

    顺序决定权重。如果两条规则都影响某元素的同一个属性,而且它们的特指度也相同,则位置最靠下(或后声明)的规则胜出。

    3.按特指度排序:特指度表示一条规则有多明确

    p {font-size:12px;}     p.largetext {font-size:16px;} 

    第二条既有标签名又有类名所以特指度更高,第二条的规则会覆盖第一条规则。

    计算特指度:ICE  公式

    1. 选择符中有一个 ID,就在 I 的位置上加 1;

    2. 选择符中有一个类,就在 C 的位置上加 1;

    3. 选择符中有一个元素(标签)名,就在 E 的位置上加 1;

    4. 得到一个三位数。

    好了,下面通过几个例子来理韶特指度。

    P 0-0-1 特指度=1

    p.largetext 0-1-1 特指度=11

    p#largetext 1-0-1 特指度=101

    body p#largetext 1-0-2 特指度=102

    body p#largetext ul.mylist 1-1-3 特指度=113 body p#largetext ul.mylist li 1-1-4

    特指度=114

    在此,每个选择符都比前一个选择符的特指度更高。

    关于CSS样式层叠的规则及使用注意问题就介绍到这,需要的朋友可以参考,希望大家阅读完这篇文章能有所收获。

(编辑:好传媒网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章