CSS中选择符的优先级(权重)
1.特殊性:
.grape{ color:Blue}
H1{ color:Red;}
<h1 class="grape">Meerkat <em>Central</em></h1>
根据规范:一般的html元素选择符(h1,p等)具有特殊性1,类选择符具有特殊性10,id选择符具有特殊性100,
值越大,优先级就越高,就休闲被选用。(值越大权重就越大,就可以优先选用)
h1{ color:red} /*特殊性=1*/
p em{ color:blue} /*特殊性=2*/
.grape{ color:fuchsia} /*特殊性=10*/
p.bright{ color:yellow} /*特殊性=11*/
p.pright em.dark{ color:gray} /*特殊性=12*/
#id01{ color:red} /*特殊性=100*/
2.继承
在特殊性的框架下,被继承的值具有特殊性0,也就是说任何显示声明的规则将会覆盖其继承样式,即便这条
规则具有多高的权重。
3.style元素
style元素在css下权重定义为100,尽管id选择符也一样,实际上style元素比id具有更高的特殊性。
4.重要性(!important)
p#warn{ color:red !important;}
em{ color:black}
<p id="warn"> This text is red,but <em>emphasized text is black </em></p>
!important具有最高级特性。比如说1000,因此!important规则会覆盖内联style属性的内容。
注意:即便定义!important,继承里的特殊性也只有0,所以以上会实例会显示为特殊性为1的em的规则。
5.层叠
5.1) 若两条规则具有相同的权值、起源、以及特殊性,那在样式表中最后出现的规则优先。
5.2) 任何位于文档中的规则都比引入的规则优先。
分享到:
相关推荐
介绍CSS中,单个选择器,以及复合选择器的权重计算规则,比如: .box #mydiv ul li.txt。通过计算选择器的权重,区别其优先级,判 断最终样式的覆盖效果。
CSS高级特性--CSS优先级 CSS优先级 01 CSS优先级 网页制作时,对统一元素,应用不同的背景,会出现什么情况? 思考 background-color:pink; background-color:blue; background-color:red; 【结论】 定义CSS样式时,...
声明在样式表或文档中越靠后出现,权重越大。如果样式表中有通过 @import 导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表的所有声明在后。
CSS 选择器权重值 CSS 具有自己的优先级计算方法,而不仅仅是行间>内部>外部、ID>class>元素 1. 样式类型 行间样式 我的行间CSS样式。 内联样式 <style type="text/css"> h1{font-size:12px; color:#000; ...
CSS选择器优先级得关系为: !important>内联>ID选择器>类选择器>标签选择器。 一种优先级算法 内联样式表的权值最高 (style=””) 权值为1000 统计选择符中的ID属性个数。(#id) 权值为100 统计选择符中的CLASS属性...
本文介绍了CSS中提升优先级属性!important的用法问题总结,分享给大家,具体如下: 一、语法 选择器{样式:值!import;} 二、说明 提升指定样式规则的应用优先权,即!important为开发者提供了一个增加样式权重的方法,...
优先级是根据由每种选择器类型构成的级联字串计算而成的。他是一个对应匹配表达式的权重。 如果优先级相同,靠后的 CSS 会应用到元素上。 注意:元素在文档树中的位置是不会影响优先级的优先级顺序 优先级逐级增加的...
如果优先级相同,元素最终会应用 CSS 中靠后的声明. 注意: 在文档树中的距离是不会对元素优先级计算产生影响的.(可以看文档中无视DOM树中的距离的例子) 优先级顺序下列是一份优先级逐级增加的选择器列表: 通用选择...
首先,给大家看一篇关于CSS优先级的示例 复制代码代码如下: <span xss=removed><html> <head> <style type=”text/css”> #redP p { /* 权值 = 100+1=101 */ color:#F00; /* 红色 */ } #redP .red...
CSS 选择器有很多,不同的选择器的权重和优先级不一样,对于一个元素,如果存在多个选择器,那么就需要根据权重来计算其优先级。 权重分为四级,分别是: 1. 代表内联样式,如`style="xxx"`,权值为 1000; 2. ...
CSS中的选择器是分权重的,如果不加注意则很有可能会遇到样式层叠的问题,下面我们就来详解CSS中的选择器优先级及样式层叠问题解决,需要的朋友可以参考下
优先级就是分配给指定的 CSS 声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定。 而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上。 当同...
基本样式和选择器(权重优先级)以及复合选择器
CSS 选择器演示这是一个展示 CSS 选择器优先级的小项目。 我发现自己经常向刚接触网站设计/开发的人解释 CSS 选择器的工作原理,并认为研究这样的东西会是一个很好的补充。 要试用,请访问 您可以添加任意数量的样式...
最近开发项目的时候因为应用了大量的CSS样式导致某些关于样式的优先级出现了问题,于是又回过头去翻别人的文章和W3C上关于CSS优先权重的计算方法,关于代码的测试,有兴趣的朋友可以按照计算方式单独编写代码进行...
解答一: 层叠指的是样式的优先级,当产生冲突时以优先级高的为准。...CSS层叠是指CSS样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性
在这种情况 (针对相同元素在不同结构下的重复定义) 发生的前提下,浏览器在渲染页面文件时,会按照一定规则进行优先级排列,然后根据这个优先级权重对发生状况的元素进行处理. 而这个浏览器遵循的规则是什么呢? 让我们...