【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>

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;
}

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