百科狗-知识改变命运!
--

css 优先级 - css 语法和语义

梵高1年前 (2023-11-21)阅读数 20#技术干货
文章标签优先级

css 优先级

p>浏览器通过优先级来判断哪些属性值与一个元素最为相关,从而在该元素上应用这些属性值。优先级是基于不同种类选择器组成的匹配规则。

优先级是如何计算的?

优先级就是分配给指定的 CSS 声明的一个权重,它由 匹配的选择器中的 每一种选择器类型的 数值 决定。

而当优先级与多个 CSS 声明中任意一个声明的优先级相等的时候,CSS 中最后的那个声明将会被应用到元素上。

当同一个元素有多个声明的时候,优先级才会有意义。因为每一个直接作用于元素的 CSS 规则总是会接管/覆盖(take over)该元素从祖先元素继承而来的规则。

注意: 文档树中元素的接近度(Proximity of elements)对优先级没有影响。

选择器类型

下面列表中,选择器类型的优先级是递增的:

  1. 类型选择器(例如,h1)和伪元素(例如,::before
  2. 类选择器 (例如,.example),属性选择器(例如,[type="radio"])和伪类(例如,:hover
  3. ID 选择器(例如,#example)。

通配选择符(universal selector)(*关系选择符(combinators)(+, >, ~, ' ', ||)和 否定伪类(negation pseudo-class)(:not())对优先级没有影响。(但是,在 :not() 内部声明的选择器会影响优先级)。

给元素添加的内联样式 (例如,style="font-weight:bold") 总会覆盖外部样式表的任何样式 ,因此可看作是具有最高的优先级。

!important 例外规则

当在一个样式声明中使用一个 !important 规则时,此声明将覆盖任何其他声明。虽然,从技术上讲,!important 与优先级无关,但它与最终的结果直接相关。使用 !important 是一个坏习惯,应该尽量避免,因为这破坏了样式表中的固有的级联规则 使得调试找bug变得更加困难了。当两条相互冲突的带有 !important 规则的声明被应用到相同的元素上时,拥有更大优先级的声明将会被采用。

一些经验法则:

  • 一定要优化考虑使用样式规则的优先级来解决问题而不是 !important
  • 只有在需要覆盖全站或外部 CSS 的特定页面中使用 !important
  • 永远不要在你的插件中使用 !important
  • 永远不要在全站范围的 CSS 代码中使用 !important
  • 与其使用 !important,你可以:

  1. 更好地利用 CSS 级联属性
  2. 使用更具体的规则。在您选择的元素之前,增加一个或多个其他元素,使选择器变得更加具体,并获得更高的优先级。
    Text
    div#test span { color: green; }
    div span { color: blue; }
    span { color: red; }

    无论 c​ss 语句的顺序是什么样的,文本都会是绿色的(green),因为这一条规则是最有针对性、优先级最高的。(同理,无论语句顺序怎样,蓝色 blue 的规则都会覆盖红色 red 的规则)

  3. 对于(2)的一种特殊情况,当您无其他要指定的内容时,请复制简单的选择器以增加特异性。
    #myId#myId span { color: yellow; }
    .myClass.myClass span { color: orange; }

什么的情况下可以使用 !important

A) 覆盖内联样式

你的网站上有一个设定了全站样式的 CSS 文件,同时你(或是你同事)写了一些很差的内联样式。

全局的CSS文件会在全局范围内设置网站的外观,而直接在各个元素上定义的内联样式可能会覆盖您的全局CSS文件。 内联样式和!important都被认为是非常不好的做法,但是有时你可以在CSS文件里用!important去覆盖内联样式。

在这种情况下,你就可以在你全局的 CSS 文件中写一些 !important 的样式来覆盖掉那些直接写在元素上的行内样式。

What color am I?
.foo[style*="color: red"] { 
  color: firebrick !important;
}

许多JavaScript框架和库都添加了内联样式。 有时候可以用!important与优先级高的选择器一起使用,以重写覆盖这些内联样式。

B) 覆盖优先级高的选择器
#someElement p {
  color: blue;
}

p.awesome {
  color: red;
}

在外层有 #someElement 的情况下,你怎样能使 awesome 的段落变成红色呢?这种情况下,如果不使用 !important ,第一条规则永远比第二条的优先级更高

怎样覆盖 !important

A)很简单,只需再添加一条 带 !important 的CSS规则,再给这个给选择器更高的优先级(添加一个标签,ID或类);或是添加一样选择器,把它的位置放在原有声明的后面(总之,最后定义一条规则比胜)。

一些拥有更高优先级的例子:

 table td { height: 50px !important; }
.myTable td { height: 50px !important; }
#myTable td { height: 50px !important; }

B)或者使用相同的选择器,但是置于已有的样式之后:

td { height: 50px !important; }

C)或干脆改写原来的规则,以避免使用 !important

[id="someElement"] p {
  color: blue;
}

p.awesome {
  color: red;
}

将id作为属性选择器的一部分而不是id选择器,将使其具有与类相同的特异性。 上面的两个选择器现在具有相同的权重。 在优先级相同情况下,后面定义的CSS样式会被应用。

The :is() and :not() exceptions

The matches-any pseudo-class :is() and the negation pseudo-class :not() are not considered a pseudo-class in the specificity calculation. But selectors placed into the pseudo-class count as normal selectors when determining the count of selector types.

:not 否定伪类在优先级计算中不会被看作是伪类。事实上,在计算选择器数量时还是会把其中的选择器当做普通选择器进行计数。

这是一块 CSS 代码:

div.outer p {
  color: orange;
}

div:not(.outer) p {
  color: blueviolet;
}

当它被应用在下面的 HTML 上时:

This is in the outer div.

This text is in the inner div.

…会在屏幕上出现以下结果:

The :where() exception

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

The specificity-adjustment pseudo-class :where() always has its specificity replaced with zero.

This chunk of CSS ...

div:where(.outer) p {
  color: orange;
}

div p {
  color: blueviolet;
}

... when used with the following HTML ...

This is in the outer div.

This text is in the inner div.

... appears on the screen like this:

基于形式的优先级(Form-based specificity)

优先级是基于选择器的形式进行计算的。在下面的例子中,尽管选择器*[id="foo"] 选择了一个ID,但是它还是作为一个属性选择器来计算自身的优先级。

有如下样式声明:

*#foo {
  color: green;
}

*[id="foo"] {
  color: purple;
}

将其应用在下面的HTML中:

I am a sample text.

最终会出现下面的效果:

虽然匹配了相同的元素,但是 ID 选择器拥有更高的优先级。所以第一条样式声明生效。

无视DOM树中的距离

有如下样式声明:

body h1 {
  color: green;
}

html h1 {
  color: purple;
}

当它应用在下面的 HTML 时:

 

Here is a title!

浏览器会将它渲染成:

直接给目标元素添加样式和目标元素继承样式对比

为目标元素直接添加样式,永远比继承样式的优先级高,无视优先级的遗传规则。

#parent {
  color: green;
}

h1 {
  color: purple;
}

css 优先级 - css 语法和语义

当它应用在下面的HTML时:

 

Here is a title!

浏览器会将它渲染成:

因为h1选择器明确的定位到了元素,但绿色选择器的仅仅继承自其父级。

规范

规范状态备注
Selectors Level 4
Calculating a selector's specificity
Working DraftAdd the specificity adjustment selector :where().
Selectors Level 3
Calculating a selector's specificity
RecommendationAdd pseudo-elements.
CSS Level 2(Revision 1)
Calculating a selector's specificity
RecommendationAdd pseudo-classes.
CSS Level 1
Cascading order
RecommendationInitial definition.

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com

免责声明:我们致力于保护作者版权,注重分享,当前被刊用文章因无法核实真实出处,未能及时与作者取得联系,或有版权异议的,请联系管理员,我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理!邮箱:344225443@qq.com)

图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!

内容声明:本文中引用的各种信息及资料(包括但不限于文字、数据、图表及超链接等)均来源于该信息及资料的相关主体(包括但不限于公司、媒体、协会等机构)的官方网站或公开发表的信息。部分内容参考包括:(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供参考使用,不准确地方联系删除处理!本站为非盈利性质站点,本着为中国教育事业出一份力,发布内容不收取任何费用也不接任何广告!)