处理CSS款式矛盾的好多个方㊑法(总结)

2021-03-23 15:35 jianzhan

1. 优化挑选符

根据应用组成器（Combinator）将挑选器的叙述写的更为精准（参照CSS挑选器 - MDN  ），比如针对以下编码片断，假如想给.cellphones中的.apple提升款式，只应用.apple，必然会对.fruit中的.apple也导致危害。

<div class="cellphones">
  <div class="apple"></div>
</div>
<div class="fruit">
  <div class="apple"></div>
</div>

可使用子孙后代组成器（Descendant Combinator）或子代组成器（Child Combinator）这类更加精准的叙述。叙述得越精准，优先选择级越高，优先选择级高些的叙述会遮盖优先选择级较低的叙述。

/* 子孙后代组成器：全部子孙后代连接点 */
.cellphones .apple {
 border: 1px solid black;
}

/* 更为精准的子孙后代组成器 */
body .cellphones .apple {
  border: 1px solid blue;
}

/* 子代组成器：立即子连接点 */
.cellphones > .apple {
  border: 1px solid red;
}

假如给.apple按序再加所述所有款式，最后，外框将展现深蓝色。

详尽的优先选择级标准参照CSS 优先选择级

2. 再写一次挑选器名

实质上是上一种状况的例外。比如针对.apple，加上以下款式：

.cellphones > .apple.apple {
  border: 1px solid purple;
}
.cellphones > .apple {
  border: 1px solid red;
}

最后，外框将展现蓝紫色。

3. 更改CSS款式表格中的次序

针对同样种类挑选器特定的款式，在CSS文档中的次序靠后的款式会遮盖以前的款式。

比如针对以下编码中的div原素，访问器3D渲染的結果会是鲜红色的：

<div class="redBorder" class="blackBorder"></div>
.blackBorder {
  border: 1px solid black;
}
.redBorder {
  border: 1px solid red;
}

必须留意的是，虽然在HTML文档中.blackBorder出現在.redBorder后，但优先选择级的分辨是依据她们在CSS文档中的次序。换句话说，CSS文档中更加靠后的.redBorder才会被选用。

4. 积极提高优先选择级（不提议）

也有一种简易粗鲁可是其实不提议的方法，便是在必须应用的款式后再加重要字!important能够将款式优先选择级提及非常高。比如：

<div class="redBorder" class="greenBorder"></div>
.greenBorder {
  border: 1px solid green !important;
}
.redBorder {
  border: 1px solid red;
}

针对所述编码，外框将显示信息为翠绿色。

应用 !important 是一个十分不太好的习惯性，会毁坏款式表格中原有的联级标准，促使调节越来越十分艰难！

参照材料：
优先选择级 - MDN
css款式矛盾如何处理 - 法术岁月机

到此这篇有关处理CSS款式矛盾的好多个方法(总结)的文章内容就详细介绍到这了,大量有关CSS 款式矛盾內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！

为您推荐