样式：CSS样式层叠的规则是什么，使用要注意哪些

【温馨提示】文章部分内容收集整理于互联网，仅作参考！如需咨询“CSS样式层叠的规则是什么，使用要注意哪些”等有关服务器、云主机租用、托管、配置、价格问题，请咨询YINGSOO客服，享受1v1贴心服务！

【海外主机】韩国显卡服务器促销 | 服务器促销活动 | 台湾物理服务器促销

【产品问答】什么是cn2线路?cn2是指什么？

这篇文章我们来了解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

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

4.CSS选择符有哪些？哪些属性可以继承？

1.id选择器（ # myid）

2.类选择器（.myclassname）

3.标签选择器（div, h1, p）

4.相邻选择器（h1 + p）

5.子选择器（ul > li）

6.后代选择器（li a）

7.通配符选择器（ * ）

8.属性选择器（a[rel = "external"]）

9.伪类选择器（a:hover, li:nth-child）

* 可继承的样式： font-size font-family color, UL LI DL DD DT;

* 不可继承的样式：border padding margin width height ;

关于CSS样式层叠的规则及使用注意问题就介绍到这，需要的朋友可以参考，希望大家阅读完这篇文章能有所收获。想要了解更多CSS样式层叠的内容，大家可以关注其它的相关文章。

YINGSOO，国际数据中心综合服务提供商，专注高品质、企业级海外服务器租用/托管服务，拥有ISP牌照、实体公司、专业团队、9年经验，7x24x365全天候服务，3天免费试用，品质保障、值得信赖!全国统一服务热线：400-630-3752

热搜词条：【自己搭建深度学习服务器】【怎么通过美国vps上外网】【服务器之间 高速 传输】【香港云服务器哪家最稳定】【数据中心本地化 支持政策】【如何用ETH买DAI】【bzz主网rpc】【飞腾cpu几纳米】【免费云服务器美国】【bee最新版本挖矿怎么更新】【mssql云数据库】【奇亚 数据库同步】【CND是什么品牌功放】【防御服务器主机】【手机游戏服务器是什么意思】【PHA为什么不涨】【华为云 香港 线路】【bee挖矿】【免流云服务器】【数据库服务器和大数据服务器】【小尺寸服务器制造商】【哪家vps提供isp】【美国高服务器多少钱2021】【阿里云怎么选香港节点】【pha官方解散了】【云专线是二层网络对接还是三层】【xch txch】【云电脑主机租赁】【移动cmi】【lol显示ip地址错误怎么回事】

版权声明：本站文章来源标注为YINGSOO的内容版权均为本站所有，欢迎引用、转载，请保持原文完整并注明来源及原文链接。禁止复制或仿造本网站，禁止在非www.yingsoo.com所属的服务器上建立镜像，否则将依法追究法律责任。本站部分内容来源于网友推荐、互联网收集整理而来，仅供学习参考，不代表本站立场，如有内容涉嫌侵权，请联系alex-e#qq.com处理。