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的选择器是如何选择的

.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,超级长的选择器，我们可以粗暴的复制粘贴一下如下

.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的选择器。

所以我的方案是

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

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

结束

Ok，下班网吧包宿！