外链论坛

 找回密码
 立即注册
搜索
查看: 131|回复: 1

前端教程:CSS样式优先级是怎么样划分的?

[复制链接]

2895

主题

2万

回帖

9997万

积分

论坛元老

Rank: 8Rank: 8

积分
99979615
发表于 2024-6-30 08:26:08 | 显示全部楼层 |阅读模式

定义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{colorrange;} /*权重为: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
回复

使用道具 举报

3074

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99108805
发表于 2024-9-29 19:47:20 | 显示全部楼层
外贸网站建设方法 http://www.fok120.com/
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-9 03:43 , Processed in 0.072511 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.