微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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/

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。