1

我想这是一个奇怪的问题......我什至不知道这是否是个好主意。我可以创建一个元素并说，“我不在乎之前的样式表说什么，这就是我想要的样式吗？”

举个例子，假设我有一个样式表，上面写着：

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)”之类的东西......这将完成，但可能与其他任何事情一样都是可维护性的噩梦。嗯……

4

3 回答 3

3

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

于 2013-04-10T17:32:05.520 回答
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 */
}
于 2013-04-10T17:29:01.517 回答
0

您可以使用!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-10T17:29:11.503 回答