我想有過另一個

我有一個顯示在我的很多網站的網頁按鈕所應用的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沒有規則）

請真的需要你的幫助

來源

2015-10-19 Ossama Benbouidda

您需要恢復頂部和左側屬性的第一條規則。一個空的規則沒有影響 – fcalderan

謝謝你的回答，但請你能告訴我如何在代碼中做到這一點？ –

@OssamaBenbouidda我可能會建議你需要發佈HTML。這是一個特定性問題，您可以在這裏閱讀更多信息：https://css-tricks.com/specifics-on-css-specificity/ – Rasmus

你可以簡單地將其更改爲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>

來源

2015-10-19 10:34:58

如果很多規則的存在，第一個優先，但如果最後一個是更具體的，它將覆蓋的第一個。但如果第一個不是特定的，並且有!important那麼優先。 :)爲了使事情更加複雜，如果兩條規則都有!important，則最具體的規則將優先。

所以這裏的簡單的解決方案，如果你不能改變已經存在的規則，只需添加!important你可以編輯代碼。如果這不起作用，請嘗試讓代碼中的代碼比其他代碼更早處理。

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

來源

2015-10-19 10:22:47 turbopipp

覆蓋規則不需要**先於另一個，因爲它具有更高的特異性（七個類別與六個類別相比）。 – 2015-10-19 12:06:55

確實如此，但是如果！重要規則先於另一個更具體的重要規則，哪個優先？ :)我會相信它的第一個，而不是最具體的，但我可能是錯的，沒有測試過。 – turbopipp

在所有重要的規則中，無論按什麼順序出現，更具體的優先順序;給予同等特異性，最後一條規則獲勝。如果沒有適用的重要規則，那麼在所有不重要的規則中，無論出現的順序如何，更具體的優先順序都是如此。 – 2015-10-19 12:34:33

你的問題的根本原因是使用了!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的引入 - 圖標保留在原始規則的正確位置。

來源

2015-10-19 12:19:12

非常感謝您的回答！它瞭解了很多東西。 –

我想有過另一個

回答

相關問題