简述下 css specificity

本文阅读 1 分钟
首页 前端笔记 正文

css specificity 即 css 中关于选择器的权重,以下三种类型的选择器依次下降

id 选择器,如 #app
class、attribute 与 pseudo-classes 选择器,如 .header、[type="radio"] 与 :hover
type 标签选择器和伪元素选择器,如 h1、p 和 ::before
其中通配符选择器 *,组合选择器 + ~ >,否定伪类选择器 :not() 对优先级无影响

另有内联样式

及 !important(最高) 具有更高的权重

:not 的优先级影响 - codepen (opens new window)可以看出 :not 对选择器的优先级无任何影响

CSS Specificity - codepen (opens new window)可以看出十几个 class 选择器也没有一个 id 选择器权重高

解压密码: detechn或detechn.com

免责声明

本站所有资源出自互联网收集整理,本站不参与制作,如果侵犯了您的合法权益,请联系本站我们会及时删除。

本站发布资源来源于互联网,可能存在水印或者引流等信息,请用户自行鉴别,做一个有主见和判断力的用户。

本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。

有没有使用过 css variable,它解决了哪些问题?
« 上一篇 05-29
css 动画与 js 动画哪个性能更好
下一篇 » 05-29

发表评论