CSS选择器覆盖

我正在尝试合并来自不同供应商的两个CSS文件.第一个定义

body.mine div {border:1px solid red}

第二个

.blue-border {border:1px solid blue}

在生成的HTML中,您可以找到

<div class="blue-border">hello</div>

这看起来很红,不是蓝色.我无法修改HTML,也无法修改第一个CSS代码.我唯一的“希望”是修改第二个CSS.任何提示？非常感谢你！

例：

<html>
 <head>
   <style>
     body.mine div {border:1px solid red}
     .blue-border {border:1px solid blue}
   </style>
 </head>
 <body class="mine">
   <div>hallo</div>
   <div class="blue-border">hello</div> <- looks red,not blue as I want
 </body>
</html>

解决方法

只需使选择器更具体：

body.mine div.blue-border {border:1px solid blue}

这告诉浏览器寻找一个更具体的元素：一个带有蓝色边框类的div,它是一个具有我的类的body元素的子元素.

你刚才说“选择任何有蓝色边框的东西”,这比前面的选择器更具特色.

http://jsfiddle.net/Kyle_Sevenoaks/tcWK5/

CSS选择器覆盖

解决方法

相关文章