4

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

4 回答 4

12

只需使选择器更具体：

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

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

你刚才说“选择任何具有蓝色边框类的东西”，这比以前的选择器要少得多。

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

于 2012-11-26T10:41:29.787 回答
4

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

body.mine div.blue-border {border:1px solid blue}
于 2012-11-26T10:41:23.247 回答
2

这也可能是!important.

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

我意识到使用 of!important经常不受欢迎，但.blue-border显然是一个只做一件事的实用程序类，这意味着如果预期结果是红色边框，则不应使用该类。

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

于 2017-01-13T14:13:42.933 回答
0

如果您希望使用 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 路径中定义颜色。

于 2017-01-13T13:33:19.373 回答