我想有过另一个

Question

我有一个显示在我的很多网站的网页按钮所应用的CSS（有自动的JavaScript控件）。

我想这个CSS：

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

被应用，而不是这一个：

.app.programEditor .actions .widget.bt-flat > .bt-flat-icon { 
    left: 145px !important; 
    top: 19px !important; 

而是发生了什么，是两个CSS应用，并作为一个结果，我获得第二个元素，覆盖我想要做的第一个CSS（一个空白的CSS没有规则）

请真的需要你的帮助

Answer 1

你可以简单地将其更改为position:static这只是一个演示。否则，如果你非常了解特异性的概念，那么就不需要这个问题。

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

.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; 
 
}

<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>

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

你的问题的根本原因是使用了!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可能不是必需的。等等。通常，不要在CSS规则中记下HTML层次结构中的每个类，而是尝试将选择器限制为唯一选择所需元素所需的选择器。在这种情况下，例如，有可能您的规则可以简单，如（只是一个例子）写：

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

二，神奇数字145和19是一个庞大的代码味道。它们可能与CSS中其他幻灯片的宽度和高度相关联，并且如果这些更改将不得不更改。 145和19是什么意思？也许他们实际上是一些基础维度的一个百分比。换句话说，也许某个元素的宽度为160像素，我们希望将该图标放在右上角。在这种情况下，您可以使用百分比，或者指定right属性，或者使用transform属性，而不必使用硬连线145，因此无论宽度如何变化 - 例如.col2的引入 - 图标保留在原始规则的正确位置。