经常使用UI组件的话,你会碰到想重写原组件样式的情况,如何讨巧的重写,而不至于暴力的使用!important呢?
第一步:了解下优先级关系
同一组内的样式优先级相同,谁在后则谁生效我们给每一组进行了编号,A>B>C>D>E
第二步:给样式描述做一个评分,找出最大积分组
根据上面的表,每出现一次描述,给对应的组评分+1
举例
.box div p{ color:red }
<div class="box">
<div><p>test</p></div>
</div>
我们希望将这个原样式的红色改为蓝色
选择器 | 所属组别 | 操作 | 当前积分 |
---|---|---|---|
.box |
属于D组的选择器 | 给D组+1 | D=1 |
p |
属于E组的选择器 | 给E组+1 | E=1 |
div |
属于E组的选择器 | 给E组+1 | E=2 |
经过计算后每组的积分如下
组 | 积分 |
---|---|
A | 0 |
B | 0 |
C | 0 |
D | 1 |
E | 2 |
第三步:制造一个积分大于它的描述
经过第二步,我们得出目前D=1 E=2
我们需要做的是制造一个 D>1 或 D=1 E>2 或 A|B|C>0 的积分组就行
- 方案一:制造D>1的,我们可以增加一个类选择器
.box.diyname div p{ color:blue }
<div class="box diyname">
<div><p>test</p></div>
</div>
或增加一个属性选择器
.box div p[blue]{ color:blue }
<div class="box">
<div><p>test</p></div>
</div>
- 方案二:制造D=1 E>2的选择器,由于E组只有伪元素选择器和标签选择器,而伪元素选择器在这里并不能用来描述p标签内的内容,所以只能选择增加一个标签选择器,这样会破坏原来DOM结构,所以方案二其实并不推荐
.box span p{ color:blue }
<div class="box">
<span><p>test</p></span>
</div>
- 方案三:制造A或B或C>0的选择器,而A是important最暴力的方法我们先排除,所以我们可以增加一个id选择器或内联
#myid .box div p{ color:blue }
<div id="myid" class="box">
<div><p>test</p></div>
</div>
或内联
<div class="box">
<div><p style="color:blue">test</p></div>
</div>
网友评论