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;
}
文章来源:https://www.toymoban.com/news/detail-730962.html
上述代码在开发者工具的【元素】>【样式】中可查看,并未体现字体的样式,但其实 Chrome 浏览器有默认字体大小,默认字体大小为 16px,并限制了最小字体大小为 12px。
对于最小字体大小, Chrome 浏览器最小字体大小可能因用户设置和系统不同而有所变化,但通常情况下最小字体大小为最小可读字体大小,约为 12px。
当设置字体大小样式为:
p {
font-size: 1px;
}
字体大小始终为 12px,但margin-block-start
和margin-block-end
会随着字体大小的设置而改变,其实际值分别为 1px。文章来源地址https://www.toymoban.com/news/detail-730962.html
到了这里,关于CSS 样式优先级的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!