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);
}

就像我说的，也许这甚至是一个坏主意...只是想知道......我有一些代码创建这个按钮，它看起来很棒，但突然间我把它出现在一个不同类的容器下面而不是它通常出现和（惊讶）它看起来都不同。我不想要的。 HEH。

更新：是的，有点知道这是一个坏主意，只是想知道是否有可能。我并不感到惊讶，因为它有点，呃，打破CSS :)。

对于想要解决一般问题而不是假设解决方案的人：我有一些代码可以完全按照UI团队希望他们看的方式添加一致的滚动按钮。我现在试图将它们放在一个模态对话框中，模式对话框在样式表中有一堆东西，如“.ourCompanyPopup button {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);
}

我可以阻止CSS应用于特定元素吗？

3 个答案: