我可以阻止CSS應用於特定元素嗎？

我想這是一個奇怪的問題...我甚至不知道這是一個好主意。我可以創建一個元素並說：「我不在乎之前所說的任何樣式表，這裏是我想要的樣式？」我可以阻止CSS應用於特定元素嗎？

所以只是作爲一個例子，說我有一個樣式表，上面寫着：

button { 
    /* whole bunch of stuff here, not even sure what all */ 
} 

.someClass button { 
    /* and some other crap here*/ 
} 

.anotherClass button { 
    /* and more here */ 
}

然後我想寫一些JavaScript會做這樣的事情：

就像我說的，也許這是一個壞主意...只是想知道...我有一些代碼創建這個按鈕，它看起來不錯，但突然之間，我有它出現在不同類的容器下，比通常出現和（驚喜）它看起來不一樣。我不想要的。嘿嘿。

更新：是的，有點知道這是一個壞主意，只是想知道是否有可能。我並不感到驚訝，因爲它會有點，呃，打破CSS :)

對於誰想要的一般問題，而不是假設的解決方案的人：我有一些代碼，將添加一致的外觀滾動按鈕完全按照UI團隊希望他們看的方式進行。我正在嘗試將它們置於模態對話框中，而模態對話框在樣式表中有一堆東西，例如「.ourCompanyPopup按鈕{stuffIDontWantOnMyScrollbars;}」覆蓋每個對象將成爲PITA。

我可以將樣式表更改爲「.ourCompanyPopup按鈕：not（.myPreciousScrollButtons）」之類的東西......「這樣做可以完成，但可能與其他任何操作一樣可維護。嗯...

來源

2013-04-10 user435779

不，不管怎樣，除非你重寫css所做的每件事，否則CSS將適用於它。 – 2013-04-10 17:26:56

我相信現在有更多關於這方面的問題，但他們很難找到（很難選擇關鍵字）。無論如何，答案是「否」，你應該制定一個描述原始問題的問題，而不是假設的解決方案，這是一個死衚衕。 – 2013-04-10 17:28:03

使用'！important'爲每個項目創建一個覆蓋所有CSS的類。 – Omar 2013-04-10 17:30:38

只是：沒有。

無論如何將應用CSS。你可以做的是：

覆蓋不需要的CSS
使不必要的CSS太過具體，你的按鈕不包括

我會推薦這：

的jQuery

function insertConstantButton(elemId) { 
     var unchangeableButton = $('<button class="dontchange" />'); 
     unchangeableButton.css('whatIReallyWant', 'etc'); 
     $("#" + elemId).append(unchangeableButton); 
    }

CSS

button:not(.dontchange) { 
    /* whole bunch of stuff here, not even sure what all */ 
} 

.someClass button:not(.dontchange) { 
    /* and some other crap here*/ 
} 

.anotherClass button:not(.dontchange) { 
    /* and more here */ 
}

如果這還不夠優雅，給按鈕的樣式表的ID和風情呢。 jQuery的

function insertConstantButton(elemId) { 
     var unchangeableButton = $('<button id="dontchange" />'); 
     $("#" + elemId).append(unchangeableButton); 
    }

CSS

button#dontchange { 
    /* your CSS */ 
}

來源

2013-04-10 17:29:01

正如我在我的更新中提到的，這可能是最快的方式來做我想要的東西...我'我只是在辯論它是否會成爲可維護性的噩夢。無論如何，無論如何，截止日期和所有事情（哎呀，我是這麼說的？） – user435779 2013-04-10 17:50:14

進一步反思，我認爲這實際上是可以的。這意味着彈出樣式現在必須意識到它可能具有滾動按鈕。但是現在樣式表非常自然地顯示：「彈出窗口中的任何按鈕都可以獲得這種樣式，除了滾動按鈕之外」。公平'nuff。 – user435779 2013-04-10 17:58:07

你可以使用!important修改，但你必須標記你不想被覆蓋每一個風格!important：

button { 
    background-color: red; 
} 

.what-i-really-want { 
    background-color: blue !important; 
} 

function insertConstantButton(elemId) { 
    var unchangeableButton = $('<button/>'); 
    unchangeableButton.addClass('what-i-really-want'); 
    $("#" + elemId).append(unchangeableButton); 
    andNowIMagicallyStopCSSFromApplyingTo(unchangeableButton); 
}

來源

2013-04-10 17:29:11 Vapire

爲什麼選擇投票？這不是一個優雅的解決方案，但它是一個有效的解決方案... – Vapire 2013-04-10 17:32:20

downvote可能是因爲你的jQuery函數不是完全需要的，因爲用'！important'語句覆蓋每個屬性太麻煩了。 – 2013-04-10 18:44:06

使用ID。一個ID將覆蓋1500萬個類。

來源

2013-04-10 17:32:05

256確切地說 – 2013-04-10 17:34:27

問題的關鍵在於按鈕可能顯示爲不同類別的後代，並且缺少對可能被重寫的每個可能事物的CSS進行過度指定，但ID不會將您帶到任何地方。 – user435779 2013-04-10 17:56:43

這個ID的重點在於，它們在哪裏或者有多少CLASSES的後裔並不重要，爲ID設置的規則將覆蓋它。除非你正在處理一些注入大量垃圾的CMS，並且垃圾包含一個ID，否則只需創建一個函數來創建一個帶ID的按鈕並在CSS樣式表中指定ID。 – 2013-04-10 18:00:12

我可以阻止CSS應用於特定元素嗎？

回答

相關問題