Question

我的网站很多页面都显示了一个按钮（使用自动javascript Widget）。

我想要这个CSS：

'brandLabel' => '<img src="favicon-32x32.png" class="pull-left"/>Car Management System',

要应用，而不是这个：

.app.programEditor .col-2 .actions .widget.bt-flat.programs > .bt-flat-icon {
}

但相反，会发生什么，是应用了两个css，结果我得到了第二个元素，它覆盖了我想用第一个CSS做的事情（一个没有规则的空白css）

请真的需要你的帮助

Answer 1

问题的根本原因是使用!important的写得不好的规则。这是为什么不使用!important的一个很好的例子。如果可能的话，尝试理解为什么{}被认为需要!important，并看看是否可以删除它。

但是，如果你要与一条重要的规则作斗争，那么你唯一的选择就是用火来灭火，然后扔回你自己的!important，在一个旨在优先考虑的规则中，因为它更具体（在这种情况下，您的覆盖规则有七个类，原始规则的六个，所以更具体），如果它具有相同的特异性，则将其放在文件中，或者如果您没有其他选择，请使用各种技巧来提高特异性。

话虽如此，整体而言，这个CSS似乎结构不合理，冗长且低效。

.app.programEditor .actions .widget.bt-flat > .bt-flat-icon {

首先，如果.app是应用于整个应用程序的类，则可能没有必要。如果.actions仅在.app.programEditor内发生，则后者根本不需要。如果.bt-flat只能应用于小部件，那么您可以只编写widget.bt-flat而不是.bt-flat。如果.bt-flat-icon .bt-flat只能在.widget.bt-flat内出现，那么.programEditor .actions .widget > .bt-flat-icon {可能就没有必要了。等等。通常，不要在CSS规则中写下HTML层次结构中的每个类，而是尝试将选择器限制为唯一选择所需元素所必需的选择器。例如，在这种情况下，您的规则可以简单地写为（仅作为示例）：

right

其次，魔法数字145和19是一个巨大的代码气味。它们可能与CSS中其他地方的其他魔术宽度和高度相关联，如果这些更改，则必须进行更改。 145和19是什么意思？也许它们实际上是某些潜在维度的百分比。换句话说，也许某些元素的宽度为160像素，我们希望将图标放在右上角。在这种情况下，您可以使用百分比或指定transform属性，也可以使用.col2属性，而不是硬连接145，而不管宽度如何变化 - 例如与cache.getAdvancedCache().getRpcManager().getMembers()的引入一样 - 图标保留在原始规则的正确位置。

Answer 2

如果存在许多规则，则第一个规则优先，但如果最后一个规则更具体，则它将覆盖第一个规则。但是，如果第一个具体不那么具有!important，那么一个优先。 :)为了使问题更复杂，如果两个规则都有!important，则最具体的规则将优先。

这里的简单解决方案，如果您无法更改现有规则，只需将!important添加到您可以编辑的代码中。如果这不起作用，请尝试在代码中先前处理代码而不是另一个代码。

.app.programEditor .col-2 .actions .widget.bt-flat.programs > .bt-flat-icon {
  left: 40px !important;
  top: 40px !important;
}

Answer 3

您只需将其更改为position:static这只是一个演示。否则，如果你非常了解特异性的概念，那么就没有必要提出这个问题了。

＆＃13;

$('#change').click(function() {
  $('.one').css("position", "static");
  $('.one').text("Position changed to Static")
});

＆＃13;

.container {
  width: 90%;
  margin: 50px auto;
  position: relative;
  border: 1px solid #000;
  display: block;
  height: 200px;
  overflow: hidden;
}
.one {
  width: 150px;
  height: 150px;
  background: tomato;
  position: absolute;
  left: 118px!important;
  top: 30px!important;
  display: block;
  color:white;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="container">
  <div class="one">

    Positioned using absolute or relative</div>
</div>
<button id="change">Change CSS</button>

＆＃13;

我希望将css应用于另一个

3 个答案: