重写别人样式的技巧-CSS优先级关系

经常使用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>