【css】css优先级之 !important

最新推荐文章于 2025-04-22 08:48:22 发布

a堅強的泡沫

最新推荐文章于 2025-04-22 08:48:22 发布

阅读量2.7k

点赞数 1

文章标签： css javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43973415/article/details/126510060

版权

权重等级

第一等：!important
第二等：代表内联样式，如: style=""，权值为1000。
第三等：代表ID选择器，如：#content，权值为100。
第四等：代表类，伪类和属性选择器，如 .content，权值为10。
第五等：代表元素和伪元素选择器，如 h2、:before 与 :after，权值为1。
第六等：通配选择器、选择符和逻辑组合伪类，权值为 0。

例子

react antd 覆盖组件库原有样式。

<Collapse ghost>
  {onlineSubOrder.map((item) => {
    return (
      /* 在这里 */
      <Panel style={{color: 'blue'}} header={item.title} key={item.title}>
        <p>request : {item.context.request}</p>
        <p>response : {item.context.response}</p>
      </Panel>
    );
  })}
</Collapse>

style={{color: 'blue'}}会被放到 ant-collapse-item 类上面，而我们希望他应该被放到 ant-collapse-header，使得 header 文字显示为蓝色。

在这里插入图片描述

解决方法：

// index.js
import './index.css'
<Collapse ghost>
  {onlineSubOrder.map((item) => {
    return (
      /* 在这里，设置类名，item.status 取值为 success/warn/faild */
      <Panel className={item.status} header={item.title} key={item.title}>
        <p>request : {item.context.request}</p>
        <p>response : {item.context.response}</p>
      </Panel>
    );
  })}
</Collapse>


// index.css
.success .ant-collapse-header {
  color: #67c23a !important;
}
.warn .ant-collapse-header {
  color: #e6a23c !important;
}
.fail .ant-collapse-header {
  color: #f56c6c !important;
}