javascript 我可以防止 CSS 样式被覆盖吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13957316/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can I prevent a CSS style to be overwritten?
提问by anmarti
I'd like to apply a CSS to some linkbuttons on page load but one of them <a id="lb1">logoff</a>must keep its style, no hover nor other event must change its style.
我想在页面加载时将 CSS 应用于某些链接按钮，但其中一个<a id="lb1">logoff</a>必须保持其样式，没有悬停或其他事件必须更改其样式。
The linkbuttons have no class and the css applied to all of them is done to tags, this way:
链接按钮没有类，应用到所有这些按钮的 css 都是对标签完成的，这样：
a
{
//style
}
a:hover
{
// style
}
Is it possible?
是否可以？
采纳答案by Quentin
No, you can't.
不，你不能。
You can use more specific selectors (or even inline CSS with the style attribute) so that they are less likely to be overridden accidentally.
您可以使用更具体的选择器（或者甚至是带有 style 属性的内联 CSS），这样它们就不太可能被意外覆盖。
You can use the (eugh) sledgehammer of !importantso they will only be overridden by another !importantrule.
您可以使用 (eugh) 大锤，!important因此它们只会被另一条!important规则覆盖。
There is no way to prevent them being overridden though.
但是没有办法防止它们被覆盖。
回答by Michelle
Please please please please please avoid using !importantwhenever possible. You will run into SO many annoying problems and issues from using this. I consider it a very lazy hack.
请请请请尽量避免使用!important。使用它你会遇到很多烦人的问题和问题。我认为这是一个非常懒惰的黑客。
What you want to do is append a class to the link that you don't want overwritten. Classes are given a higher priority than general selectors (such a, p, b). So if you append this class to the link, the CSS will override the default CSS you have set for a.
您想要做的是将一个类附加到您不想覆盖的链接中。类的优先级高于一般选择器（例如a, p, b）。因此，如果您将此类附加到链接，CSS 将覆盖您为a.
CSS:
CSS：
a {
color: red;
}
a:hover {
color: blue;
}
.derp:hover { /*you can add everything you want to preserve here, essentially make it the same as the link css. you can also change it to #lbl:hover, although there's no good reason to be using an ID as a CSS selector*/
color: red;
}
HTML:
HTML：
<a href="#">this will turn blue on hover</a>
<a class="derp" href="#">this will stay red on hover</a>
Here's a fiddle to show you. The second link has a class appended that preserves the original style: http://jsfiddle.net/p6QWq/
这里有一个小提琴给你看。第二个链接附加了一个保留原始样式的类：http: //jsfiddle.net/p6QWq/
回答by War10ck
Seeing your code posted makes it a little more clear on what you want to do. Try this:
看到你发布的代码会让你更清楚你想要做什么。试试这个：
a {
text-decoration: none;
color: orange;
}
a:hover {
text-decoration: underline;
color: blue;
}
This would apply a default style to all <a>elements. Now you could overwrite this default style by providing a specific style for the anchor with the id you gave above:
这会将默认样式应用于所有<a>元素。现在，您可以通过使用上面给出的 id 为锚点提供特定样式来覆盖此默认样式：
#lb1 {
color: black;
text-decoration: none;
}
#lb1:hover {
color: black;
text-decoration: none;
}
I mocked this up in a quick and dirty jsFiddle. See if this gives you the desired result. IDs take precedence over classes and default element styling. So if you have one that you want to keep the same, apply and ID and style the particular element accordingly. This would also help you by preventing you from having to apply a class to several elements. It's less coding to apply one ID than to apply twelve classes. (Just an exaggerated example. I don't know how many links you have.)
我在一个快速而肮脏的jsFiddle 中对此进行了模拟。看看这是否给你想要的结果。ID 优先于类和默认元素样式。因此，如果您有一个想要保持不变的元素，请相应地应用和 ID 并设置特定元素的样式。这也可以帮助您避免将一个类应用于多个元素。应用一个 ID 比应用十二个类更少编码。（只是一个夸张的例子。不知道你有多少链接。）
Hope this helps.
希望这可以帮助。
回答by Darren Wainwright
Why not add a classto all the link buttons you want to change, and not add it to the one you don't want to change.
为什么不在class要更改的所有链接按钮上添加一个，而不是将其添加到您不想更改的按钮上。
Then you can call:
然后你可以调用：
$(".myClass").css("backgound-color", "blue");
- This would change the background color for every element with a class of
myClassto a blue background.
- 这会将具有类的每个元素的背景颜色更改为
myClass蓝色背景。
Or you could add a whole new class to the link buttons that have a class of myClass:
或者，您可以向具有以下类别的链接按钮添加一个全新的类myClass：
$(".myClass").addClass("myExtraClass");
- This would then make the
classattribute of your link buttonclass="myclass myExtraClass"
- 这将使
class您的链接按钮的属性class="myclass myExtraClass"
回答by Christophe
css is cascadingby definition, so any style you apply to a tags will apply to this specific one, except if you overwrite it.
css根据定义是级联的，因此您应用于标签的任何样式都将应用于此特定样式，除非您覆盖它。
You'll have to either assign a class to all the other buttons or overwrite all the default properties for this specific button.
您必须为所有其他按钮分配一个类或覆盖此特定按钮的所有默认属性。
Also, do not forget the pseudo-classes :visited and :active.
另外，不要忘记伪类 :visited 和 :active。
回答by PhearOfRayne
You should use !importantin your css like :
你应该!important在你的 css 中使用：
a {
/* style */
background: #FFF !important;
}
a:hover {
/* style */
background: #FFF !important;
}
回答by Fergus
You could always overwrite your css by simply creating another stylesheet and place it at the END of your stylesheet links in the head of your html.
您总是可以通过简单地创建另一个样式表并将其放在 html 头部的样式表链接的末尾来覆盖您的 css。
<head>
<link rel="stylesheet" href="location/location/first_stylesheet.css">
<link rel="stylesheet" href="location/location/revised_stylesheet.css">
</head>
This is not the most productive method of overwriting your css however; one would be well advised to eliminate the necessity for this separate stylesheet by simply appending elements with a class attribute. The class attr will allow you to modify basic html elements, tags and overlay a final layer to "rule them all". Enjoy!
然而，这并不是覆盖 css 的最有效方法；最好通过简单地附加具有 class 属性的元素来消除此单独样式表的必要性。类 attr 将允许您修改基本的 html 元素、标签并覆盖最后一层以“统治它们”。享受！
