如何使用另一個CSS類

我是相當新的CSS3來覆蓋CSS類的屬性，我希望能夠做到以下幾點：如何使用另一個CSS類

當我加個班變成一個元素，它覆蓋此特定元素中使用的另一個類的屬性。

比方說，我有

<a class="left carousel-control" href="#carousel" data-slide="prev">

我希望能夠添加一個名爲bakground-none類，這種情況會覆蓋默認背景的類left。

謝謝！

來源

2014-01-06 user3075049

只要使用!important這將有助於覆蓋

background:none !important;

在此請看：when-using-important-is-the-right-choice

來源

2014-01-06 16:41:00

！重要的是一個不好的做法。很快，所有代碼變得非常重要。 – TPAKTOPA

如果列表中的其他類後bakground-none類，它的屬性將覆蓋已經設置的。這裏不需要使用!important。

例如：

.red { background-color: red; } 
.background-none { background: none; }

和

<a class="red background-none" href="#carousel">...</a>

的鏈接不會有一個紅色的背景。請注意，這隻會覆蓋具有較少或同等特定選擇器的屬性。

來源

2014-01-06 16:47:41 Ruud

感謝您的回覆！我試過這個作爲第一個解決方案，但由於某種原因，它不起作用！ – user3075049

如果樣式是以特定方式定義的，例如.form-horizontal .form-group {margin-left：-15px}，則這種重寫css類的方式將不起作用。在這裏你必須使用！重要的 – DanKodi

添加！重要的.background-none {background：none！importatn; }這項工作正常 – santhosh

至於important關鍵字的選擇，你可以使選擇更具體的，例如：

.left.background-none { background:none; }

（注：類名之間沒有空格）。

在這種情況下，規則將適用於類別屬性中列出的.left和.background-none（不管順序或接近程度如何）。

來源

2014-01-06 17:36:04

涵蓋在最多upvoted的答案，但重點 – aidanok

有不同的方法可以覆蓋屬性。假設您有

.left { background: blue }

例如，以下任何一項都將覆蓋它：

a.background-none { background: none; } 
body .background-none { background: none; } 
.background-none { background: none !important; }

前兩個「勝利」通過選擇特異性;第三個贏得了!important，一個鈍器。

您還可以組織您的樣式表，例如，規則

.background-none { background: none; }

勝簡單地通過順序，即通過爲否則同樣「有力的」規則後。但是這實施了限制，並且要求您在任何樣式表的重組中都要小心。

這些都是CSS Cascade的全部例子，這是一個至關重要但被廣泛誤解的概念。它定義瞭解決樣式表規則之間衝突的確切規則。

P.S.我在問題中使用left和background-none。它們是應該使用而不是的類名稱的示例，因爲它們反映了特定的渲染而不是結構或語義角色。

來源

2014-01-06 17:44:09

LIFO是瀏覽器的方式解析CSS properties..If您使用薩斯聲明稱爲

變量「$頭背景：紅色;」

使用它，而不是直接分配像紅色或藍色的值。如果要覆蓋只是重新分配值

「$頭背景：藍色」

然後

背景色：$頭背景;

它應該平滑覆蓋。使用「！重要」並不總是正確的選擇..它只是一個修補程序

來源

2016-03-11 09:39:08

您應該通過增加覆蓋樣式的特定。有增加特異性的不同方法。使用!important會影響特異性，是不好的練習，因爲它會破壞樣式表中的自然級聯。

下圖來自css-tricks.com將幫助您根據點結構爲您的元素提供正確的特異性。無論哪個特徵具有更高的分數，都會贏。聽起來像一場比賽 - 不是嗎？

結帳樣品這裏css-tricks.com計算。這將有助於您理解這個概念，並且只需要2分鐘。

如果您希望自己生成和/或比較不同的特性，請嘗試使用特殊性計算器：https://specificity.keegan.st/或者您可以使用傳統紙張/鉛筆。

如需進一步閱讀，請嘗試MDN Web Docs。

所有最好的不使用!important。

來源

2017-09-15 22:08:39 baltoro

如何使用另一個CSS類

回答

相關問題