我可以阻止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按钮{stuffIDontWantOnMyScrollbars;}”。覆盖每个对象将是一个PITA。

我可能可以将样式表更改为“ .ourCompanyPopup button：not（.myPreciousScrollButtons）”之类的东西……这会做的不尽如人意，但可能与其他任何事情一样，都是可维护性的噩梦。 嗯...

Answer 1

使用ID。 一个ID将覆盖1500万个课程。

Answer 2

简单：不。

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

Answer 3

您可以使用!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);
}