Question

我正在尝试合并来自不同供应商的两个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>

Answer 1

只需使选择器更具体：

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

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

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

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

Answer 2

您只需要一个比body.mine div更具体的选择器，以便它覆盖不太具体的选择器。尝试类似：

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

Answer 3

这也可能是!important的完美用例。

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

我意识到!important的使用常常令人不悦，但是.blue-border显然是一个只做一件事的实用工具类，这意味着如果不使用该类，则不应使用该类。意图结果是红色边框。

在这种情况下，我更倾向于使用过度限定的选择器!important，因为合格的选择器可能会对性能产生重大影响。

Answer 4

如果您希望使用css更改所有元素中的任何属性，请不要在特定元素中定义此属性：

html body div#very .specific { 
  /*  Any prop that is NOT the ones you want to apply generally  */ 

   margin: ...
   font-weight: ...

  /* NOT color, nor background, etc */
}


/* These now will catch in the above too */
.blue{ 
   color: blue;     
}
.back-yellow{   
   background: #ff0;
}

说明：颜色和背景将适用于没有更具体的颜色/背景定义的所有元素。

因此，如果要覆盖一般规则，则只在特定CSS路径中定义颜色。

CSS选择器覆盖

4 个答案: