CSS权重优先级的计算

说到CSS权重优先级,我想大部分人首先想到的是!important,

但具体是怎么去计算这个权重,大部分人是不太了解的。

1.位置造成的权重

在学CSS时,老师或者是书本都会告诉我们CSS样式应用时都是按照“就近原则”的。所以根据这个规则我们就知道:

内嵌样式 > 内部样式表 > 外联样式表

但实习开发过程中我们几乎都是使用外联样式表,所以以上规则我们知道就行,能用就行,在下面不做探讨。(曾经我遇到过这样一个事,用开发者工具看样式,以为内嵌样式以为是JS应用的,找半天没找到那串JS代码,)

2.选择器造成的权重

选择器造成的权重大致可以看成是与所应用元素的“亲疏关系”来决定:

important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性选择 > 伪对象 > 继承 > 通配符

我们虽然知道了大小关系,但有的时候一个样式可能跟了多个选择器,那应该怎么判断它的权重大小呢?

这就是我们下面要探讨的问题,如果把CSS各个选择器的权限量化的话,按照标准是这个样子:

  • important的权重为1000 (内嵌样式的权重也为1000)
  • ID的权重为100
  • Class的权重为10
  • 伪类的权重为10 (如:E:hover{…})
  • 属性的权重为10
  • 伪对象的权重为1 (如:E::before{…})
  • 标签的权重为1 (如:a{…})
  • 通配符的权重为1 (如:*{…})

这里需要注意的是,子选择器(>)和相邻同胞选择器(+)权重都为0;

我们来看一波实例:

CSS:

content div#main-content h2{ color:red; } #content #main-content>h2{ color:blue } body #content div[id="main-content"] h2{ color:green; } #main-content div.paragraph h2{ color:orange; } #main-content [class="paragraph"] h2{ color:yellow; } div#main-content div.paragraph h2.first{ color:pink; }

HTML:

CSS简介

CSS(Cascading Style Sheet,可译为“层叠样式表”或“级联样式表”)是一组格式设置规则,用于控制Web页面的外观。

使用CSS布局的优点

1、表现和内容相分离 2、提高页面浏览速度 3、易于维护和改版 4、使用CSS布局更符合现在的W3C标准.

效果:

从上面实例可以看出:

  • 第一个样式=2100+21=202
  • 第二个样式=2*100+1=201
  • 第三个样式=1100+110+3*1=113
  • 第四个样式=1100+110+2*1=112
  • 第五个样式=1100+110+1*1=111
  • 第六个样式=1100+210+3*1=123

雅虎军规建议少用important,所以说ID选择器往往起到至关重要的作用,在实际操作中,如果所应用的样式不起作用,试着在选择器前添加其父元素的ID以增加它的权重。

但我们要注意一点,我们在给元素添加样式时,其选择器尽量控制在三个以内,包含三个。具体原因我不知道,但这样是好的习惯。