CSS 样式优先级

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

CSS 样式优先级决定了最终呈现在浏览器中的样式是哪一组样式,在多组样式中有冲突时,最终呈现在浏览器中的样式是具有最高优先级的样式。

CSS 样式优先级顺序如下:

内联样式 > 内部样式 > 外部样式

!important > 内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器 > 通配选择器 > 浏览器默认样式

如果两组样式具有相同的优先级,则后定义的样式将覆盖先定义的样式。

浏览器默认样式是指浏览器在渲染 HTML 文档时,为每个 HTML 元素设置的默认样式。这些默认样式取决于浏览器的版本和类型,并且可能会因浏览器之间的差异而产生不一致。为了保证页面的一致性,通常会采用 CSS reset 或 normalize.css 这样的技术来重置浏览器的默认样式。

示例:

  • 内联样式:写在标签属性 style 的样式,如 <span style="color:green">
  • ID 选择器,如 #id{…}
  • 类选择器,如 .class{…}
  • 属性选择器,如 p[type="email"]{…}
  • 伪类选择器,如 input:hover{…}
  • 标签选择器,如 div{…}
  • 伪元素选择器,如 span::before{…}
  • 通配选择器,如 *{…}
  • 浏览器默认样式,p 元素在 Chrome 浏览器 [版本 109.0.5414.119(正式版本) (x86_64)] 中样式如下:
p {
    display: block;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

 

上述代码在开发者工具的【元素】>【样式】中可查看,并未体现字体的样式,但其实 Chrome 浏览器有默认字体大小,默认字体大小为 16px,并限制了最小字体大小为 12px

对于最小字体大小, Chrome 浏览器最小字体大小可能因用户设置系统不同而有所变化,但通常情况下最小字体大小为最小可读字体大小,约为 12px。

当设置字体大小样式为:

 

p {
    font-size: 1px;
}

字体大小始终为 12px,但margin-block-startmargin-block-end会随着字体大小的设置而改变,其实际值分别为 1px。文章来源地址https://www.toymoban.com/news/detail-730962.html

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

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

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

相关文章

  • 【CSS】CSS 特性 ( CSS 优先级 | 优先级引入 | 选择器基本权重 )

    定义 CSS 样式时 , 可能出现  多个 类型相同的 规则   定义在 同一个元素上 , 如果 CSS 选择器 相同  ,  执行 CSS 层叠性  , 根据  就近原则  选择执行的样式 , 如 : 出现两个 div 标签选择器 , 都设置 color 文本颜色 ; 如果 CSS 选择器 不同 ,  则需要考虑 CSS 优先级 问题 ,  需要计

    2024年02月10日
    浏览(54)
  • CSS 选择器优先级

    声明:本文参考来源于MDN CSS 优先级(80%)和B站尚硅谷的课程(20%) 我想你一定是来进行速查的,所以我会尽量精简文章内容,保证不浪费时间,不说废话 文章包括新的 :is 和 :where(实验性) 的说明 优先级就是分配给 CSS 声明的一个权重,由 匹配的选择器中的 每一种选

    2024年02月13日
    浏览(50)
  • 7 CSS选择器优先级

    7 选择器优先级 所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序。样式表中的特殊性描述了不同规则的相对权重。

    2024年02月12日
    浏览(38)
  • css选择器分类及优先级判断

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

    2023年04月09日
    浏览(43)
  • 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日
    浏览(73)
  • CSS_三大特性下_优先级

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

    2024年02月08日
    浏览(60)
  • css中选择器的优先级

    CSS 的优先级是由选择器的 特指度(Specificity) 和 重要性(Importance) 决定的,以下是优先级规则: 特指度 : ID 选择器 (#id) : 每个ID选择器计为100。 类选择器 (.class)、属性选择器 ([attr]) 和伪类选择器 (:hover, :focus 等) : 每个此类选择器计为10。 元素选择器 (p, div, span 等)  和伪

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

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

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

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

    2023年04月22日
    浏览(54)
  • CSS 中的优先级规则是怎样的?

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

    2024年02月13日
    浏览(34)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包