1、 细化选择符
通过使用组合器（Combinator）将选择器的描述写得更加精确，例如对于下述代码片段，如果想给.cellphones中的.apple增加样式，只使用.apple，势必会对.fruit中的.apple也造成影响。
/* 后代组合器：所有后代节点 */
.cellphones .apple {
border: 1px solid black;
}
/* 更加精确的后代组合器 */
body .cellphones .apple {
border: 1px solid blue;
}
/* 子代组合器：直接子节点 */
.cellphones > .apple {
border: 1px solid red;
}
2、再写一次选择器名
本质上是上一种情况的特例。例如对于.apple，添加如下样式：
.cellphones > .apple.apple {
border: 1px solid purple;
}
.cellphones > .apple {
border: 1px solid red;
}
3、改变CSS样式表中的顺序
对于相同类型选择器指定的样式，在CSS文件中的顺序靠后的样式会覆盖之前的样式。 例如对于下述代码中的div元素，浏览器渲染的结果会是红色的：
.blackBorder {
border: 1px solid black;
}
.redBorder {
border: 1px solid red;
}
以上就是css样式冲突的解决办法，希望对大家有所帮助。更多css学习指路：css教程
本文转载于php中文网，如有侵犯联系作者修改。
来自 “ ITPUB博客 ” ，链接：https://blog.itpub.net/3806/viewspace-2828889/ ，如需转载，请注明出处，否则将追究法律责任。
上一篇：
css中content属性的特点
下一篇：
javascript如何优化DOM
请登录后发表评论
登录
全部评论
