我可以阻止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应用于特定元素吗？

回答

相关问题