定义CSS样式时,经常显现两个或更加多样式规则应用在同一元素上的状况。此时CSS就会按照样式规则的权重,优先表示权重最高的样式。CSS优先级指的便是CSS样式规则的权重。在网页制作中,CSS为每一个基本选取器都指定了区别的权重,方便咱们添加样式代码。为了深入理解CSS优先级,咱们经过一段示例代码进行分析。CSS样式代码如下:
p{ color:red;} /*标签样式*/
.blue{ color:green;} /*class样式*/
theader{ color:blue;} /*id样式*/
CSS样式代码对应的HTML结构为:
<p class="blue" id="header">
帮帮我,我到底表示什么颜色?
</p>
在上面的示例代码中,运用区别的选取器对同一个元素设置文本颜色,此时浏览器会按照CSS选取器的优先级规则解析CSS样式。为了便于判断元素的优先级,CSS为每一种基本选取器都分配了一个权重,咱们能够经过虚拟数值的方式为这些基本选取器匹配权重。假设标签选取器拥有权重为1.类选取器拥有权重则为10,id选取器拥有权重则为l00。这般id选取器“#header”就拥有最大的优先级,因此呢文本表示为蓝色。
针对由多个基本选取器形成的复合选取器(并集选取器除外),其权重能够理解为这些基本选取器权重的叠加。例如,下面的CSS代码。
p strong{color:black} /*权重为:1+1*/
strong.blue{color:green;} /*权重为:1+10*/
.father strong{color:yellow} /*权重为:10+1*/
p.father strong{color range;} /*权重为:1+10+1*/
p.father .blue{color:gold;} /*权重为:1+10+10*/
theader strong{color:pink;} /*权重为:100+1*/
#header strong.blue{color:red;} /*权重为:100+1+10*/
对应的HTML结构为:
<p class="father" id="header">
<strong class="blue">文本的颜色</strong>
</p>
此时,CsS代码中的“#header strong.blue”选取器的权重最高,文本颜色将表示为红色。另外,在思虑权重时,咱们还必须重视有些特殊的状况。
(1)继承样式的权重为0
在嵌套结构中、h不管父元素样式的权重多大,被子元素继承时,它的权重都为0,亦便是说子元素定义的样式会覆盖继承来的样式。例如,下面的CSS样式代码。
strong{color:red;}
#header{color:green;}
CSS样式代码对应的HTML结构如下:
<p id="header" class="blue">
<strong>继承样式不如自己定义的权重大</strong>
</p>
在上面的代码中,虽然“#header”拥有权重100,但被标签继承时权重为0。而“strong”选取器的权重虽然仅为1,但它大于继承样式的权重,因此页面中的文本表示为红色。
(2)行内样式优先
应用style属性的元素,其行内样式的权重非常高。换算为数值,咱们能够理解为远大于100。因此呢行内样式持有比上面说到的选取器都高的优先级。
(3)权重相同期,CSS的优先级遵循就近原则
亦便是说,靠近元素的样式拥有最大的优先级,或说根据代码摆列上下次序,排在最下边的样式优先级最大。例如,下面为外边定义的CSS示例代码。
/*CSS文档,文件名为style_red.css*/
#header{color:red;} /*外边样式*/
对应的HTML结构代码如下:
<titl
|