HTML高级技巧:详解CSS的优先权

优先权问题其实就是一个冲突解决的问题,当同一个元素(或内容)被CSS选择符选中时,就要按照优先权取舍不同的CSS规则,这其中涉及到的问题其实很多。

首先就是CSS规则的specificity(特殊性),CSS2.1有一套关于specificity的计算方式,用一个四位的数字串(CSS2是三位)来表示,最终specificity越高的规则越特殊,在优先级判定时也就越有优势。关于specificity的具体计算在各种情况下的数字加成有如下一般规则:

每个ID选择符(#someid),加 0,1,0,0。

每个class选择符(.someclass)、每个属性选择符(形如[attr=""]等)、每个伪类(形如:hover等)加0,0,1,0

每个元素或伪元素(:firstchild)等,加0,0,0,1

其他选择符包括全局选择符*,加0,0,0,0。相当于没加,不过这也是一种specificity,后面会解释。

按这些规则将数字串逐位相加,就得到最终计算得的specificity,然后在比较取舍时按照从左到右的顺序逐位比较。

举一些例子吧:

h1 {color: red;}
/* 只有一个普通元素加成,结果是 0,0,0,1 */
body h1 {color: green;}
/* 两个普通元素加成,结果是 0,0,0,2 */
--后者胜出
h2.grape {color: purple;}
/* 一个普通元素、一个class选择符加成,结果是 0,0,1,1*/
h2 {color: silver;}
/*一个普通元素,结果是 0,0,0,1 */
--前者胜出
html > body table tr[id="totals"] td ul > li {color: maroon;}
/* 7个普通元素、一个属性选择符、两个其他选择符,结果是0,0,1,7 */
li#answer {color: navy;}
/* 一个ID选择符,一个普通选择符,结果是0,1,0,1 */
--后者胜出

除了specificity还有一些其他规则

文内的样式优先级为1,0,0,0,所以始终高于外部定义。这里文内样式指形如<div style="color: red">blah</div>的样式,而外部定义指经由<link>或<style>标签定义的规则。

有!important声明的规则高于一切。

如果!important声明冲突,则比较优先权。

如果优先权一样,则按照在源码中出现的顺序决定,后来者居上。

由继承而得到的样式没有specificity的计算,它低于一切其他规则(比如全局选择符*定义的规则)。

关于经由@import载入的外部样式,由于@import必须出现在所有其他规则定义之前(如不是,则浏览器应该忽略之),所以按照后来居上原则,一般优先权冲突时是占下风的。

这里需要提一下IE,IE是可以识别位置错误的@import的,但无论@import在什么地方,它都认为是位于所有其他规则定义之前的,这可能会引发一些误会。

所以优先权问题虽然看起来简单,但其背后还是有蛮复杂的机制的,需要多多留意。

时间: 2024-09-19 09:44:04

HTML高级技巧:详解CSS的优先权的相关文章

详解CSS的优先权

优先权问题其实就是一个冲突解决的问题,当同一个元素(或内容)被CSS选择符选中时,就要按照优先权取舍不同的CSS规则,这其中涉及到的问题其实很多. 首先就是CSS规则的specificity(特殊性),CSS2.1有一套关于specificity的计算方式,用一个四位的数字串(CSS2是三位)来表示,最终specificity越高的规则越特殊,在优先级判定时也就越有优势.关于specificity的具体计算在各种情况下的数字加成有如下一般规则: 每个ID选择符(#someid),加 0,1,0,

精彩实例详解CSS滤镜教程

css|教程|滤镜|详解 使您由浅入深了解CSS滤镜的使用,是一个不错的教程!希望对您学习CSS有用! 1.实例详解CSS滤镜(1)概述 (2005-05-04) 2.实例详解CSS滤镜(2)Mask属性 (2005-05-04) 3.实例详解CSS滤镜(3)Blur属性 (2005-05-04) 4.实例详解CSS滤镜(4)Chroma属性 (2005-05-04) 5.实例详解CSS滤镜(5)DropShadow属性 (2005-05-04) 6.实例详解CSS滤镜(6)Glow属性 (20

bat命令入门与高级技巧详解_DOS/BAT

目录第一章 批处理基础第一节 常用批处理内部命令简介 1.REM 和 :: 2.ECHO 和 @ 3.PAUSE 4.ERRORLEVEL 5.TITLE 6.COLOR 7.mode 配置系统设备 8.GOTO 和 : 9.FIND 10.START 11.assoc 和 ftype 12.pushd 和 popd 13.CALL 14.shift 15.IF 16.setlocal 与 变量延迟(ENABLEDELAYEDEXPANSION / DISABLEDELAYEDEXPANSION

详解CSS选择器、优先级与匹配原理

作为一个Web开发者,掌握必要的前台技术也是很重要的,特别是在遇到一些实际问题的时候.这里给大家列举一个例子: 给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了.这个时候突然意识到了CSS选择器的优先级问题,这里就CSS选择器的优先级问题做了一些总结. 51CTO推荐阅读:巧妙地使用CSS选择器 选择器种类 严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择

详解CSS定义HR水平线的几种样式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  &

实例详解CSS滤镜(5)DropShadow属性

ado|css|滤镜|详解 DropShadow属性是为了添加对象的阴影效果的.它实现的效果看上去就像使原来的对象离开页面,然后在页面上显示出该对象的投影.看一看它的表达式: Filter:DropShadow(Color=color,Offx=Offx,Offy=offy, Positive=positive) 该属性一共有四个参数: Color代表投射阴影的颜色. Offx和offy分别X方向和Y方向阴影的偏移量.偏移量必须用整数值来设置.如果设置为正整数,代表X轴的右方向和Y轴的向下方向.

实例详解CSS滤镜(4)Chroma属性

css|滤镜|详解 Chroma属性可以设置一个对象中指定的颜色为透明色,它的表达式如下: Filter:Chroma(color=color) 这个属性的表达式是不是很简单,它只有一个参数.只需把您想要指定透明的颜色用Color参数设置出来就可以了.比如下面这幅图: 图中显示两种字体,两种颜色,我们现在对"leaves"字体添加chroma属性,使其透明.代码如下: <html> <head> <title>chroma filter</ti

实例详解CSS滤镜(3)Blur属性

css|滤镜|详解 假如您用手在一幅还没干透的油画上迅速划过,画面就会变得模糊.CSS下的blur属性就会达到这种模糊的效果. 先来看一下blur属性的表达式: filter:blur(add=add,direction,strength=strength) 我们看到blur属性有三个参数:add.direction.strength. Add参数有两个参数值:true和false.意思是指定图片是否被改变成模糊效果. Direction参数用来设置模糊的方向.模糊效果是按照顺时针方向进行的.其

实例详解CSS滤镜(2)Mask属性

css|滤镜|详解 Mask属性为对象建立一个覆盖于表面的膜.它的表达式也很简单: Filter:Mask(Color=颜色) 只有一个Color参数,用来指定使用什么颜色作为掩膜. 同样,我们来看一下一幅图片在加上mask属性前后的效果(见下图): 加上MASK属性的效果就好象是在用有色眼镜看物体一样.上面的效果的代码如下: <html> <head> <title> mask filter </title> <style>//*设置CSS样式