|
定义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
| 
发表于 2024-6-30 08:26:08