CSS 选择器优先级

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

CSS 选择器权重

声明:本文参考来源于MDN CSS 优先级(80%)和B站尚硅谷的课程(20%)

我想你一定是来进行速查的,所以我会尽量精简文章内容,保证不浪费时间,不说废话

文章包括新的:is:where(实验性)的说明

优先级:概念

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

多个 CSS 优先级相等的时候,最后的那个选择器将会被应用到元素上。

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

速查:六点

  1. 格式:(1 | 0,a,b,c)
  • 1 | 0: 是否有!important
  • a: id的个数
  • b: .class :matix [key]的个数
  • c: el, ::el 的个数
  1. 冲突比较:从左到右,后来居上
  2. 简记:
  • !imp > 行内 > id > .class > el > 通配符 > 继承
  1. 如果有!imp,那么即使是jsDOM也无法修改
  2. 提示:VSCode能自动计算权重
  3. 注意:
  • :not:is本身对优先级没有影响,但是,在 :not和is内部声明的选择器会影响优先级
  • :where() 和其中的选择器的优先级是 0

比较:后来者居上,a>b>c

  1. 从左到右:a->b->c,从左到右比较
/* A选择器:(0,2,3) */
:is(h1) div:nth-child(2n):not(p:selected)

/* B选择器:(0,2,1) */
h1 div.headtext[needcolor]

/*
1. 0=0
2. 2=2
3. 3>1
4. A选择器胜出
*/
  1. 后来居上:前面写的被后来覆盖(前提:后者优先级>=前者)
<link href="foo.css">
<link href="bar.css">

<TodoList /> <!-- green -->
/* foo.css */
TodoList {
  color: red;
}
/* bar.css */
TodoList {
  color: green;
}
  1. 无影响者:通配选择符(*)关系选择符(+, >, ~, " ", ||)和 否定伪类:not()对优先级没有影响

!important:核弹级声明

当在一个样式声明中使用它,此声明将覆盖任何其他声明

无视:DOM树

什么意思?直接上代码!

body h1 {
  color: green;
}

/* 后来居上 */
html h1 {
  color: purple;
}

<html>
  <body>
    <h1>Here is a title!</h1>
  </body>
</html>

h1将被渲染成紫色。

其他:关于where选择器

实验性: 这是一项实验性技术,在将其用于生产之前,请仔细检查MDN浏览器兼容性表格。
给你康好了QAQ:

  • Chrome 88+
  • Firefox 78+
  • Safari 14+
  • IE ??? 早没有了

工具:计算优先级

如果你的编辑器没有查看优先级的功能

那么这是一个网站,供你计算优先级:Specificity Calculator文章来源地址https://www.toymoban.com/news/detail-637405.html

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

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

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

相关文章

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

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

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

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

    2023年04月22日
    浏览(52)
  • CSS三种样式表、样式表优先级、CSS选择器

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

    2024年02月09日
    浏览(42)
  • 前端面试题-(浏览器内核,CSS选择器优先级,盒子模型,CSS硬件加速,CSS扩展)

    内核 描述 Trident(IE内核) 主要用在window系统中的IE浏览器中,由微软研发并投入使用 Gecko(Firefox内核) 主要用于Firefox浏览器中,特点是代码完全公开,开发程度高 Webkit(Safari内核) 苹果产品中的safari浏览器使用的就是webkit内核,其特点是不受ie,firefox等内核的约束,比较安全。

    2024年01月25日
    浏览(67)
  • 路由时权重和优先级的区别

    在路由时,权重(Weight)和优先级(Priority)是两个不同的概念,它们在路由策略中起着不同的作用: 1、权重(Weight): 2、优先级(Priority): 在一些路由策略中,这两个概念可能会结合使用。例如,可以先根据优先级排序规则,然后在每个优先级中根据权重选择目标。这

    2024年01月16日
    浏览(38)
  • CSS 样式优先级

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

    2024年02月07日
    浏览(37)
  • BGP 属性分类及路由优先级选择

    路由属性是对路由的特定描述,所有的BGP路由属性都可以分为以下4类 Origin、AS-Path 、Next hop Local-Preference、Atomic_Aggregate Community、 Aggregator MED、Originator_ID、Cluster_list、Weight 说明 :Origin属性用来定义路径信息的来源,标记一条路由是怎么成为BGP路由的 它有以下 3种类型 : IGP

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

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

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

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

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

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

    2024年02月13日
    浏览(34)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包