css中选择器的优先级

这篇具有很好参考价值的文章主要介绍了css中选择器的优先级。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

css中选择器的优先级,CSS,css,前端

CSS 的优先级是由选择器的特指度(Specificity)重要性(Importance)决定的,以下是优先级规则:

特指度:

  • ID 选择器 (#id): 每个ID选择器计为100。

  • 类选择器 (.class)、属性选择器 ([attr]) 和伪类选择器 (:hover, :focus 等): 每个此类选择器计为10。

  • 元素选择器 (p, div, span 等) 和伪元素选择器 (::before, ::after 等): 每个元素或伪元素选择器计为1。

优先级计算是将所有类型的选择器的分数相加。例如,#header .nav-link 的特指度就是 100 + 10 = 110。

样式来源顺序:

  • 行内样式(内联样式):通过HTML元素的 style 属性直接定义的样式具有最高的特指度,除非遇到 !important 规则。

  • 内部样式表(在 <style> 标签中定义的样式)。

  • 外部样式表(通过 <link> 标签引入的样式表)。

  • 浏览器默认样式。

当两个规则特指度相同时,最后定义的规则会覆盖之前的规则(就近原则)。

重要性:

  • !important 规则:当一个声明后面跟有 !important,它会覆盖任何其他相同属性且没有 !important 的声明,无论其特指度如何。

总结来说,按照优先级从高到低排序如下:

  • 行内样式(style=""),带有 !important 或不带

  • ID 选择器 (#id) 带有或不带 !important

  • 类选择器、属性选择器、伪类选择器等带有或不带 !important

  • 元素选择器、伪元素选择器带有或不带 !important

  • 最后定义的同优先级规则(对于非 !important 规则)

在实际应用中,尽量避免滥用 !important,因为它会降低代码可维护性和可预测性。

通常情况下,合理使用选择器以及遵循良好的层叠规则即可解决大部分样式冲突问题。

详细的示例说明

CSS样式优先级是由选择器的类型和特指度决定的,以下是一个详细的示例说明:

内联样式(行内样式):

<p style="color: red;">这是一个红色段落</p>

在这个例子中,<p>元素的颜色被设置为红色,由于样式直接写在了元素的style属性中,所以其优先级最高。

ID 选择器:

#myPara {
    color: blue;
}
<p id="myPara">如果这个段落有id='myPara',则应该是蓝色</p>

ID选择器(如#myPara)具有较高的优先级。在上述代码中,如果有其他不那么具体的样式试图改变段落颜色,但该段落有ID且通过ID选择器设置了颜色,则最终颜色将是蓝色。

类选择器、属性选择器和伪类选择器:

.important {
    color: green;
}
<p class="important">这是一个绿色段落,因为它应用了重要类</p>

类选择器(.important)的优先级高于标签选择器。因此,即使其他地方定义了对所有<p>元素的文本颜色,带有class="important"的段落将显示为绿色。

标签选择器和伪元素选择器:

p {
    color: black;
}

这里所有的<p>元素默认颜色是黑色。但是,如果前面的例子中的任一更高优先级的选择器也作用于<p>元素,它们会覆盖这个标签选择器的效果。

!important 规则:

p {
    color: yellow !important;
}

当 !important 修饰符用于某个声明时,它会提升该声明的优先级,使其高于其他任何非!important声明,即使是更具体的选择器。所以在上面的例子中,尽管之前可能有其他优先级更高的选择器设置了颜色,但加上!important后,<p>元素将以黄色显示。

总结来说,按照优先级从高到低排序如下:

  • 行内样式(style=""

  • ID选择器 (#id)

  • 类选择器、属性选择器、伪类选择器 (.[class][attr]:hover, 等)

  • 标签选择器、伪元素选择器 (pdiv:before, 等)

  • !important声明可以应用于以上任意选择器,并强制提升其优先级

当多个规则同时应用于一个元素时,优先级高的规则生效。

如果两个选择器具有相同特指度(例如两个类选择器),则根据CSS文件或样式表加载顺序来确定(后来加载的样式通常会覆盖先前加载的同优先级样式)。

css中选择器的优先级,CSS,css,前端文章来源地址https://www.toymoban.com/news/detail-837222.html

到了这里,关于css中选择器的优先级的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • css选择器分类及优先级判断

    目录 选择器分类 全局选择器 元素选择器 类选择器 ID选择器 合并选择器 内联选择器  选择器的优先级 css语法规则由两个主要部分构成:选择器,以及一条或多条样式声明。 全局选择器:* 元素选择器:标签名称 类选择器:class属性名(.) ID选择器:id属性名(#) 内联选择

    2023年04月09日
    浏览(42)
  • CSS选择器和优先级权重

    标签选择器、伪元素选择器:1 类选择器、属性选择器、伪类选择器:10 id 选择器:100 内联样式:1000 选择器 格式 优先级权重 id选择器 #id 100 类选择器 .class 10 属性选择器 a[ref=“eee”] 10 伪类选择器 div:last-child 10 标签选择器 div 1 伪元素选择器 div:after 1 相邻兄弟选择器 h1+p

    2024年02月10日
    浏览(72)
  • CSS三种样式表、样式表优先级、CSS选择器

    CSS,全称是:Cascading Style Sheets,层叠样式表,用于修饰HTML页面的。 CSS编写规则如下所示: CSS编写的规则分为两部分,分别是:选择器、声明块。 声明块,需要使用【{}】大括号包裹,括号里面使用【key: value;】的格式定义属性。 选择器,表示需要对哪个HTML标签添加CSS样式

    2024年02月09日
    浏览(42)
  • CSS快速入门-选择器和优先级

    CSS是一种用于样式化网页的语言,全称为“层叠样式表”(Cascading Style Sheets)。 它可以控制网页中元素的外观和布局,例如颜色、字体、大小、边距、对齐等,让网页变得更加美观和易于阅读。 使用CSS可以将样式与网页内容分离开来,从而使网页结构更加清晰,减少HTML代码

    2023年04月22日
    浏览(52)
  • CSS 样式优先级

    CSS 样式优先级决定了最终呈现在浏览器中的样式是哪一组样式,在多组样式中有冲突时,最终呈现在浏览器中的样式是具有最高优先级的样式。 CSS 样式优先级顺序如下: 内联样式 内部样式 外部样式 !important 内联样式 ID 选择器 类选择器 = 属性选择器 = 伪类选择器 标签选择

    2024年02月07日
    浏览(38)
  • CSS_三大特性下_优先级

    CSS_特性继承和层叠 - Bublly - 博客园 (cnblogs.com) CSS_特性继承和层叠 - Bublly - 博客园 (cnblogs.com) 1特性: 不同选择器具有不同的优先级,优先级高的选择器样式会覆盖优先级低选择器样式 2优先级公式: 继承通配符选择器标签选择器类选择器id选择器行内样式!important 3注意点:

    2024年02月08日
    浏览(58)
  • CSS 的 折叠性、继承性、优先级

    折叠性是指当多个CSS属性应用到同一个元素上时,它们如何相互作用以确定最终的样式。当不同的规则决定同一个属性的值时,折叠性规定了哪个规则的值会被应用。 折叠性的规则如下: 样式冲突,遵循的原则是就近原则,哪个样式离结构近,就执行哪个样式 样式不冲突,

    2024年02月15日
    浏览(63)
  • CSS 中的优先级规则是怎样的?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月13日
    浏览(34)
  • CSS3-三大特性-继承性、层叠性、优先级

        CSS三大特性         1 继承性         2 层叠性         3 优先级         1 继承性             特性:子元素有默认继承父元素样式的特点(子承父业)             可以继承的常见属性:                 1 color                 2 font-style、font-weight、font-size、fo

    2024年02月11日
    浏览(41)
  • css学习3(三种样式表与样式控制优先级)

    1、外部样式表:当样式需要应用于很多页面时,外部样式表将是理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件来改变整个站点的外观。每个页面使用 link 标签链接到样式表,也要放到head中。 2、外部样式表可以在任何文本编辑器中进行编辑。文件不能包

    2024年02月12日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包