Могу ли я предотвратить применение CSS к определенному элементу?

Question

Я думаю, это своего рода странный вопрос ... и я даже не знаю, хорошая ли это идея. Могу ли я создать элемент и сказать: «Мне все равно, что какой-либо из таблиц стилей, которые были до этого, вот как я хочу, чтобы он был стилизован?»

Так же, как, например, что у меня есть таблица стилей, которая говорит:

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

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

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

А потом я хочу написать некоторые Javascript, что будет делать что-то вроде этого:

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

Как я говорю , может быть, это даже плохая идея ... просто интересно ... У меня есть код, создающий эту кнопку, и это выглядит великолепно, но потом я вдруг появляюсь под другим классом контейнера, чем обычно появляется и (неожиданно) все выглядит иначе. Который я не хочу. хе.

Обновление: Да, похоже, это была плохая идея, просто было интересно, возможно ли это. Я не удивлен, что это не так, потому что это было бы любопытно, а, сломать CSS :)

Тому, кому нужна общая проблема, а не предполагаемое решение: у меня есть код, который добавит непрозрачный свиток кнопки точно так же, как команда UI хочет, чтобы они выглядели. Я пытаюсь поместить их в модальный диалог сейчас, и модальный диалог содержит кучу вещей в таблице стилей, например «.ourCompanyPopup button {stuffIDontWantOnMyScrollbars;}« Переопределение каждого из них будет PITA.

Возможно, я мог бы изменить таблицу стилей на что-то вроде «.OurCompanyPopup button: not (.myPreciousScrollButtons)» ... Это будет сделано, но может быть таким же кошмаром, как и все остальное. Хммм ...

Answer 1

Просто: нет.

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 */ 
} 

Если этого не достаточно элегантный, что кнопка идентификатор и стиль его в таблице стилей. JQuery

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

CSS

button#dontchange { 
    /* your CSS */ 
} 

Answer 2

Вы можете использовать модификатор !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); 
} 

Answer 3

использовать идентификатор. Один идентификатор будет перекрывать 15 миллионов классов.