CSS层叠性（重要）

CSS层叠性（重要）
指多种CSS样式的叠加。
是浏览器处理冲突的一个能力，如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉。
原则：
1、样式冲突，遵循的原则是就近原则，即CSS的书写位置。
2、样式不冲突，不会层叠

CSS继承性
写CSS样式表时，子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需要将它应用于父元素即可。
注意：恰当地使用继承可以简化代码，降低CSS样式的复杂性。子元素可以继承父元素的样式（text-,font-，line-这些元素开头的都可以继承，以及color属性）

CSS优先级
定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。
在考虑权重时，初学者还需要注意一些特殊的情况，具体如下：
继承样式的权重为0.即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。
行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100.总之，他拥有比上面提到的选择器都大的优先级。
权重相同时，CSS遵循就近原则，也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
CSS定义了一个!important命令，该命令被赋予最大的优先级。也主浊说不管权重如何以及样式位置的远近，！important都具有最大优先级。

CSS特殊性（specificity）
关于CSS权重，需要一套公式来计算，由四位的数组成，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。
继承或者*的值：0，0，0，0
每个元素（标签）值：0，0，0，1
每个类，伪类值为：0，0，1，0
每个ID为：0，1，0，0
每个行内样式值：1，0，0，0
每个!important值：无穷大

1、数位之间没有进制。
2、通过继承的影响的，权重为0，【即样式没有携带有文字标签】如：
.colorRed{
   color:#f00; /* 没有选中p标签，所以只是通过继承影响的，权重为0 */
}
p {
   color:#0f0; /* 权重为1 */
}
<div class="colorRed">
   <p>颜色</p>
</div>

代码如下:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">#father #son{ /*权重为0,2,0,0*/color:blue;}#father p .c2{ /*权重为0，1，1，1*/color:black;}div .c1 p .c2{ /*权重为0，0，2，2*/color:red;}#father {color:green !important; /*继承的权重为0*/}</style>
</head>
<body><div id="father" class="c1"><p id="son" class="c2">颜色</p></div>
</body>
</html>

效果如下:

CSS层叠性（重要）相关推荐

CSS三大特性（CSS层叠性、CSS继承性、CSS优先级）
1. CSS层叠性层叠性是指多种CSS样式的叠加. 原则: 样式冲突,遵循的原则是就近原则. 那个样式离着结构近,就执行那个样式. 样式不冲突,不会层叠示例代码: <!DOCTYPE htm ...
【CSS】CSS 特性 ① ( CSS 层叠性 | 样式冲突 | 就近原则选择样式 )
文章目录一.CSS 层叠性 1.样式层叠冲突 2.样式层叠不冲突一.CSS 层叠性 1.样式层叠冲突 CSS 层叠性 : 为标签设置多种 CSS 样式 , 会出现 CSS 样式叠加的情况 , ...
css层叠性css层叠性
概念:当样式声明发生冲突时,用户代理需要确定样式声明的最终值,既要考虑样式的来源又要考虑样式的特殊声明又要考虑优先级.以及先后顺序 ,这个过程就叫做层叠当一个标签被相同的选择器选择到的时候,相同的 ...
前端 CSS层叠性 CSS选择器优先级
层叠性层叠性:权重的标签覆盖掉了权重小的标签,说白了 ,就是被干掉了权重:谁的权重大,浏览器就会显示谁的属性我们现在已经学过了很多的选择器,也就是说在一个HTML页面中有很多种方式找到一个元素并 ...
CSS的特性之层叠性介绍
初学者在学习到CSS的时候会了解到它具有继承性.层叠性.优先级等等不同的属性,如果不了解这些属性会导致我们在使用它的时候出现各种各样的问题,今天小千就来给大家介绍一下CSS的层叠性属性. CSS层叠性 ...
详解CSS三大特性之层叠性、继承性和重要性——Web前端系列学习笔记
1. CSS层叠性 CSS层叠性就是在HTML文件中对于同一个标签元素可以有多个CSS样式存在,当有相同权重的样式存在时,会根据这些CSS样式的前后顺序来决定,处于最后面的CSS样式会被应用,示例代码 ...
CSS基础(part4)--CSS的层叠性继承性优先级
学习笔记,仅供参考,有错必纠参考自:CSS中文文档文章目录 CSS CSS层叠性 CSS继承性 CSS的优先级(特殊性) 复合选择器的优先级关于优先级权重的注意事项 CSS CSS层叠性所谓层 ...
讲给后台程序员看的前端系列教程(19)——CSS的层叠性与继承性以及优先级
C语言自学完备手册(33篇) Android多分辨率适配框架 HTML5前端开发实战系列教程 MySQL数据库实操教程(35篇图文版) 推翻自己和过往--自定义View系列教程(10篇) 走出思维困境 ...
CSS 三大特性（层叠性，继承性，优先级）
CSS层叠性所谓层叠性是指多种CSS样式的叠加. 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上,那么这个时候一个属性就会将另一个属性层叠掉比如先给某个标签指定了内部 ...

CSS层叠性（重要）

CSS层叠性（重要）相关推荐

最新文章

热门文章