【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 的样式。

【css】css优先级之 !important相关推荐

【CSS】CSS选择器优先级及!important属性
CSS的选择器是有权重的,当不同选择器的样式设置有冲突时,会采用权重高的选择器设置样式.权重(即优先级)的规则如下,权重越高,优先级越高: 同一个元素可以使用多个规则来指定它的同一样式(比如字体颜色) ...
css选择器优先级排序
css选择器优先级排序 !important > 行内样式 > ID选择器 > 类选择器 | 属性选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性 ...
html样式优先级important,如何提升CSS优先级，!important的用法
说到这种功能,只有自己亲身用到才会有体会,我也是如此. 项目背景: 我在调用百度API的时候,需要改变地图的样式,如:颜色.字体.边框等.但是由于是调用的百度JS,地图样式也是写在JS里,并且写的是行 ...
何为CSS 样式优先级
当创建的样式表越来越复杂时,一个标签的样式将会受到越来越多的影响,这种影响可能来自周围的标签,也可能来自其自身.下面我们从这两方面去看看 CSS 样式的优先级. CSS 的继承性 CSS 的继承特性指 ...
CSS 选择器优先级与效率优化
CSS选择器优先级与效率优化 Date: 7th of Aug, 2015 Author: HaoyCn 本文收集网上各处关于CSS选择器的文章总结,并自己归纳一篇. 各类选择器的优先级 import ...
[css] 说说CSS的优先级是如何计算的？
[css] 说说CSS的优先级是如何计算的? 选择器种类严格来讲,选择器的种类可以分为三种:标签名选择器.类选择器和ID选择器.而所谓的后代选择器和群组选择器只不过是对前三种选择器的扩展应用.而在标 ...
深入理解CSS权重(优先级)
对于上一篇:你应该知道的一些事情--CSS权重 ,实战时会遇到一些实际的问题,本篇继续加重对css优先级的理解.最近跟公司同事分享session时在谈到CSS优先级权重问题,引入了之前一直在网上公认的 ...
css样式优先级和权重问题
内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...
html 样式优先级,CSS样式优先级
##### 一.CSS样式选择器优先级 ID选择器(形如#divMain{}) > 类(形如.divSpecial{}) > 标签(形如body{}) ##### 二.CSS文件的优先级 ...
css 权重及！important
在编写css样式的时候,我们会时常碰到自己写的样式没有生效,尤其是引用一些外部框架的时候,这种情况更容易发生. CSS样式的优先级按照官方的表述,css优先级如下: 通用选择器(*) < 元素 ...

【css】css优先级之 !important

权重等级

例子

【css】css优先级之 !important相关推荐

最新文章

热门文章