CSS中出现样式冲突如何解决

　　介绍

今天就跟大家聊聊有关CSS中出现样式冲突如何解决,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

<强> 1。细化选择符

通过使用组合器(Combinator)将选择器的描述写得更加精确(参考CSS选择器- MDN ),例如对于下述代码片段,如果想给.cellphones中的苹果增加样式,只使用苹果,势必会对.fruit中的苹果也造成影响。

& lt; div 类=癱ellphones"比; 　　& lt;才能div 类=癮pple"祝辞& lt;/div> 　　& lt;/div> 　　& lt; div 类=癴ruit"祝辞 　　& lt;才能div 类=癮pple"祝辞& lt;/div> 　　& lt;/div>

可以使用后代组合器(后代选择符)或子代组合器(子)这种更为精确的描述。描述得越精确,优先级越高,优先级更高的描述会覆盖优先级较低的描述。

/*,后代组合器:所有后代节点,*/.cellphones  .apple  { 　　,边界:1 px  solid 黑色; 　　}/*,更加精确的后代组合器,*/body  .cellphones  .apple  { 　　边境才能:1 px  solid 蓝色; 　　}/*,子代组合器:直接子节点,*/.cellphones 祝辞,.apple  { 　　边境才能:1 px  solid 红色; 　　}

如果给。苹果按顺序加上上述全部样式,最终,边框将呈现蓝色。

详细的优先级规则参见CSS优先级

<强> 2。再写一次选择器名

本质上是上一种情况的特例。例如对于。苹果,添加如下样式:

.cellphones 祝辞,.apple.apple  { 　　边境才能:1 px  solid 紫色; 　　} 　　.cellphones 祝辞,.apple  { 　　边境才能:1 px  solid 红色; 　　}

最终,边框将呈现紫色。

<强> 3。改变CSS样式表中的顺序

对于相同类型选择器指定的样式,在CSS文件中的顺序靠后的样式会覆盖之前的样式。

例如对于下述代码中的div元素,浏览器渲染的结果会是红色的:

& lt; div 类=皉edBorder",类=癰lackBorder"祝辞& lt;/div> .blackBorder  { 　　边境才能:1 px  solid 黑色; 　　} 　　.redBorder  { 　　边境才能:1 px  solid 红色; 　　}

需要注意的是,尽管在HTML文件中.blackBorder出现在.redBorder后,但优先级的判断是根据他们在CSS文件中的顺序。也就是说,CSS文件中更为靠后的.redBorder才会被采用。

<强> 4。主动提升优先级(不建议)

还有一种简单粗暴但是并不建议的办法,就是在需要使用的样式后加上关键字!重要可以将样式优先级提到极高。例如:

& lt; div 类=皉edBorder",类=癵reenBorder"祝辞& lt;/div> .greenBorder  { 　　边境才能:1 px  solid  green  !重要; 　　} 　　.redBorder  { 　　边境才能:1 px  solid 红色; 　　}

看完上述内容,你们对CSS中出现样式冲突如何解决有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。

CSS中出现样式冲突如何解决