CSS如何简单粗暴的提升优先级

省流

通过:not来简单粗暴的提升优先级🤞

需求

公司内部的管理后台需要写一个受控的Form.Item组件,需要处理error样式等问题,需求如图

👇

可以看到我们的需求是Select有数据的情况不展示error样式,未选择的情况展示正常的error样式。

初期思路

这种需要修改Antd样式的问题,我最开始认为是张嘴吃豆芽儿~通过class名称简单覆盖一下即可,但是现实给我了一巴掌😒

看到这个!important我只能说好好好,这样玩。

分析问题

既然看到了!important那我们必然需要通过CSS优先级来解决了,首先复习一下优先级概念

CSS优先级是一种规则,根据这个规则来确定不同的CSS样式应该如何应用到同一个元素上。权重是CSS优先级的一个重要方面,它用于确定哪些样式更优先被应用。 CSS的优先级从高到低依次为:

  1. 内联样式(在HTML元素内部使用style属性)
  2. 内部样式表(在HTML文档的head部分中使用style元素)
  3. 外部样式表(外部CSS文件)
  4. !important标记(在任何地方通过添加!important标记来提高优先级)

权重是一种量化指标,用于确定哪些样式更优先被应用。权重越高,样式的优先级越高。权重计算基于选择器的类型,包括ID选择器、类选择器、属性选择器和标签选择器等。

权重的基本计算方法如下:

  • 一个ID选择器的权重为100
  • 一个类选择器、伪类或属性选择器的权重为10
  • 一个标签选择器的权重为1
  • !important标记的权重为无穷大

如果多个样式具有相同的优先级,则后出现的样式将覆盖先出现的样式。同时,如果一个元素同时被多个样式定义,则最终的样式将是这些样式的综合效果。

总之,理解CSS优先级和权重对于编写有效的CSS代码非常重要,可以帮助我们更好地控制页面的样式和布局。

感谢文心一言的回答~~

上面我们看到了!important的权重无限大,如果想要覆盖!important只能采用优先级 更高或者后出现的样式来覆盖!

解决问题

上面我们分析了问题的原因以及解决办法,如果我们采用后出现 的样式覆盖先出现 的样式办法的话,首先来看看Antd选择器是如何选择的

scss 复制代码
.ant-select-status-error.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) .ant-select-selector{
   background-color: #fff;
   border-color: #ff4d4f !important;
}

OKOK,超级长的选择器,我们可以粗暴的复制粘贴一下如下

scss 复制代码
.notError:global{  
    &.ant-select-status-error.ant-select:not(.ant-select-disabled):not(.ant-select-customize-input):not(.ant-pagination-size-changer) .ant-select-selector{  
       border-color: #d9d9d9 !important;  
    }  
}

可以看到Antd的样式的确被我们自己的样式覆盖了,这个方法不错但是我有点强迫症看不了这么长的类名写法,所以我选择提升权重来处理。

上面已经看到权重算法是

权重的基本计算方法如下:

  • 一个ID选择器的权重为100
  • 一个类选择器、伪类或属性选择器的权重为10
  • 一个标签选择器的权重为1
  • !important标记的权重为无穷大

有一点要说明的是只要有ID选择器 就会比类选择器 大,只要有类选择器 就会比标签选择器 大,并不会出现10类选择器 等于ID选择器 ,或者11类选择器 大于ID选择器 。PS:之前有说法是256个class选择器可以干掉1个id选择器但是本人测试后并没有成功干掉。😢

回到正题,我们现在的需求是用尽量少的的选择器去提升到比Antd现在的选择器权重 大,那么根据上面的理论依据我们只需要选择一个ID选择器 就可以爆杀Antd的选择器。

所以我的方案是

css 复制代码
.notError {  
  :global { 
    .ant-select-selector:not(#root) {  
      border-color: #d9d9d9 !important;  
    }  
  }
}

利用:not伪类的特性来提升优先级。

结束

Ok,下班网吧包宿!

相关推荐
然我24 分钟前
React 16.8:不止 Hooks 那么简单,这才是真正的划时代更新 🚀
前端·react.js·前端框架
OEC小胖胖41 分钟前
【React Hooks】封装的艺术:如何编写高质量的 React 自-定义 Hooks
前端·react.js·前端框架·web
CF14年老兵2 小时前
「Vue 3 + View Transition 实现炫酷圆形缩放换肤动画」
前端·css·trae
404_Not_Found112 小时前
用 react + ts 实现我的第一个 todoList
react.js
前端小书童2 小时前
前端开发中的css:「ink → Bootstrap → 预处理器 → Tailwind → UnoCSS」
前端·css
木春3 小时前
React入门:构建你的第一个应用
前端·react.js
牧天白衣.5 小时前
CSS中linear-gradient 的用法
前端·css
吃奥特曼的饼干6 小时前
React useEffect 清理函数:别让依赖数组坑了你!
前端·react.js
前端老鹰6 小时前
HTML <meta name="color-scheme">:自动适配系统深色 / 浅色模式
前端·css·html
随笔记7 小时前
react中函数式组件和类组件有什么区别?新建的react项目用函数式组件还是类组件?
前端·react.js·typescript