`
默糖糖
  • 浏览: 14798 次
  • 性别: Icon_minigender_2
  • 来自: 西安
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

CSS选择符的优先级(权重)

阅读更多
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选择器权重计算及优先级

    介绍CSS中,单个选择器,以及复合选择器的权重计算规则,比如: .box #mydiv ul li.txt。通过计算选择器的权重,区别其优先级,判 断最终样式的覆盖效果。

    HTML5&CSS3网页制作:CSS优先级.pptx

    CSS高级特性--CSS优先级 CSS优先级 01 CSS优先级 网页制作时,对统一元素,应用不同的背景,会出现什么情况? 思考 background-color:pink; background-color:blue; background-color:red; 【结论】 定义CSS样式时,...

    ylsislove#make-a-little-progress-every-day#前端-CSS选择器优先级1

    声明在样式表或文档中越靠后出现,权重越大。如果样式表中有通过 @import 导入的样式表,一般认为出现在导入样式表中的声明在前,主样式表的所有声明在后。

    CSS中选择器的权重值的计算

    CSS 选择器权重值 CSS 具有自己的优先级计算方法,而不仅仅是行间&gt;内部&gt;外部、ID&gt;class&gt;元素 1. 样式类型 行间样式 我的行间CSS样式。 内联样式 &lt;style type="text/css"&gt; h1{font-size:12px; color:#000; ...

    彻底弄懂CSS选择器以及优先级

    CSS选择器优先级得关系为: !important&gt;内联&gt;ID选择器&gt;类选择器&gt;标签选择器。 一种优先级算法 内联样式表的权值最高 (style=””) 权值为1000 统计选择符中的ID属性个数。(#id) 权值为100 统计选择符中的CLASS属性...

    CSS中提升优先级属性!important的用法问题总结

    本文介绍了CSS中提升优先级属性!important的用法问题总结,分享给大家,具体如下: 一、语法 选择器{样式:值!import;} 二、说明 提升指定样式规则的应用优先权,即!important为开发者提供了一个增加样式权重的方法,...

    举例详解CSS中的的优先级

    优先级是根据由每种选择器类型构成的级联字串计算而成的。他是一个对应匹配表达式的权重。 如果优先级相同,靠后的 CSS 会应用到元素上。 注意:元素在文档树中的位置是不会影响优先级的优先级顺序 优先级逐级增加的...

    浏览器如何判断css优先级

    如果优先级相同,元素最终会应用 CSS 中靠后的声明. 注意: 在文档树中的距离是不会对元素优先级计算产生影响的.(可以看文档中无视DOM树中的距离的例子) 优先级顺序下列是一份优先级逐级增加的选择器列表: 通用选择...

    权重和层叠规则决定了CSS样式优先级

    首先,给大家看一篇关于CSS优先级的示例 复制代码代码如下: &lt;span xss=removed&gt;&lt;html&gt; &lt;head&gt; &lt;style type=”text/css”&gt; #redP p { /* 权值 = 100+1=101 */ color:#F00; /* 红色 */ } #redP .red...

    3一面 3:CSS-HTML 知识点与高频考题解析.md

    CSS 选择器有很多,不同的选择器的权重和优先级不一样,对于一个元素,如果存在多个选择器,那么就需要根据权重来计算其优先级。 权重分为四级,分别是: 1. 代表内联样式,如`style="xxx"`,权值为 1000; 2. ...

    详解CSS中的选择器优先级及样式层叠问题解决

    CSS中的选择器是分权重的,如果不加注意则很有可能会遇到样式层叠的问题,下面我们就来详解CSS中的选择器优先级及样式层叠问题解决,需要的朋友可以参考下

    CSS优先级的两种理解方式

    优先级就是分配给指定的 CSS 声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定。 而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上。 当同...

    css选择器和基本样式

    基本样式和选择器(权重优先级)以及复合选择器

    css-selector-demo

    CSS 选择器演示这是一个展示 CSS 选择器优先级的小项目。 我发现自己经常向刚接触网站设计/开发的人解释 CSS 选择器的工作原理,并认为研究这样的东西会是一个很好的补充。 要试用,请访问 您可以添加任意数量的样式...

    CSS2中从优先权重的计算方式来辨别下CSS

    最近开发项目的时候因为应用了大量的CSS样式导致某些关于样式的优先级出现了问题,于是又回过头去翻别人的文章和W3C上关于CSS优先权重的计算方法,关于代码的测试,有兴趣的朋友可以按照计算方式单独编写代码进行...

    CSS层叠样式表的层叠是什么意思(自我理解)

    解答一: 层叠指的是样式的优先级,当产生冲突时以优先级高的为准。...CSS层叠是指CSS样式在针对同一元素配置同一属性时,依据层叠规则(权重)来处理冲突,选择应用权重高的CSS选择器所指定的属性

    CSS:相同元素不同结构重复定义的问题

    在这种情况 (针对相同元素在不同结构下的重复定义) 发生的前提下,浏览器在渲染页面文件时,会按照一定规则进行优先级排列,然后根据这个优先级权重对发生状况的元素进行处理. 而这个浏览器遵循的规则是什么呢? 让我们...

Global site tag (gtag.js) - Google Analytics