css优先级和权重

原创 2015年11月21日 13:58:33

1.css权重级:

  • id选择器为100
  • class选择器为10
  • 元素选择器为1
这如何理解呢?
 优先级等于所有选择器权重相加。例如:#test.test 的优先级就为110, #test span的优先级就为101,前者大于后者,所有前者优先。

示例

  <style>
  div#test {
  	color:red;
  }
  div.test{
  	color:orange;
  }

  </style>
  <div class='test' id='test'>文字</div>

文字颜色为红色,因为div#test优先级为101,div.test优先级为11。

2.权重一样,后面的样式优先

示例
  <style>
  .test#test {
  	color:red;
  }
  #test.test{
  	color:blue;
  }

  </style>
  <div class='test' id='test'>文字</div>
文字颜色为蓝色。

3.元素style属性高于css中的样式

示例
  <style>
  .test#test {
  	color:red;
  }
  #test.test{
  	color:blue;
  }

  </style>
  <div class='test' id='test' style='color:green;'>文字</div>
文字颜色为绿色。

4.!import优先,高于style属性css中的样式

示例
  <style>
  .test#test {
  	color:red !important;
  }
  #test.test{
  	color:blue;
  }

  </style>
  <div class='test' id='test' style='color:green;'>文字</div>
文字颜色为红色。


版权声明:本文为博主原创文章,未经博主允许不得转载。

Css 学习笔记--样式引入方式及按权重判断优先级

CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。 从CSS 样式代码插入的形...
  • Lady_seven
  • Lady_seven
  • 2016年03月08日 11:45
  • 954

CSS选择器的权重与优先规则

我们在使用CSS对网页元素定义样式时经常会遇到这种情况:要对一般元素应用一般样式,然后在更特殊的元素上覆盖它们。那么我们怎么样来保证我们所新定义的元素样式能覆盖目标元素上原有的样式呢? 在CSS...
  • dahuzix
  • dahuzix
  • 2013年06月21日 16:20
  • 984

CSS样式的优先级和权重

1、相同权值情况下,CSS样式的优先级总结来说,就是——就近原则(离被设置元素越近优先级别越高): 内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中)。   2、...
  • qq_39078439
  • qq_39078439
  • 2017年06月13日 20:50
  • 181

CSS中常用选择器及权重计算

CSS中常用选择器及权重计算   目前常用的选择器有七种,分别是 1, 标签选择器 写法如下 标签名{ 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; .........
  • gm546202249
  • gm546202249
  • 2016年12月23日 20:10
  • 743

css选择器优先级及权重计算

一、优先级分类 通常可以将css的优先级由高到低分为6组: 第一优先级:无条件优先的属性只需要在属性后面使用!important。它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。...
  • Coder_Chang
  • Coder_Chang
  • 2017年05月27日 09:57
  • 1762

【CSS】CSS选择器优先级及!important属性

CSS的选择器是有权重的,当不同选择器的样式设置有冲突时,会采用权重高的选择器设置样式。权重(即优先级)的规则如下,权重越高,优先级越高: 同一个元素可以使用多个规则来指定它的同一样式(比如字体颜色)...
  • LZGS_4
  • LZGS_4
  • 2015年02月03日 10:18
  • 18369

css中使用!important优先级最高问题

我们都知道在css属性在不同的地方有不同的优先级,但是我们可以在css定义中的用!important限定的定义最高优先级。 下面我通过四种情况做个实例: 下面是实例代码代码里有对应的说明: ...
  • bymyself11
  • bymyself11
  • 2016年07月28日 14:49
  • 4666

CSS层叠规则优先级、内部样式表与外部样式表优先级

我将CSS优先级总结为四个级别的优先,按照从高到低的顺序排列分别是标签离修饰内容近,!important相关,选择器级别,CSS代码位置靠下。在比较的时候从高往低比较。如果在某一优先级层面上已经比较出...
  • cxl444905143
  • cxl444905143
  • 2014年10月28日 14:14
  • 1346

CSS选择器优先级计算

CSS选择器优先级计算
  • Dong_PT
  • Dong_PT
  • 2016年04月29日 20:14
  • 1219

关于css属性的优先级详细探索

本文解释部分css样式优先级的细节问题。涉及外联,内嵌,内联,和脚本能不同赋值方式。...
  • cc2293260
  • cc2293260
  • 2016年03月10日 16:00
  • 798
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css优先级和权重
举报原因:
原因补充:

(最多只允许输入30个字)