【css】css优先级之 !important

权重等级

• 第一等：!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>
1
2
3
4
5
6
7
8
9
10
11

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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

如图所示，会强制使用 .success .ant-collapse-header 的样式。