覆盖特定 div 的 css？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3255356/
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
Overriding css for a specific div?
提问by Mo.
i have a a:hoverfor all my links on my page:
a:hover我的页面上有所有链接：
a:hover {
background-color: blue;
text-decoration: underline;
color: black;
}
but but there are specific ones in a div that i don't want anything to happen when you hover over them, so can i do something like this?
但是，但是当你将鼠标悬停在 div 上时，我不希望发生任何事情，所以我可以做这样的事情吗？
#what_we_offer a:hover {
background-color: none:
text-decoration: none;
color: none;
}
basically i don't want it to do any of the above when it hovers over them specific links.
基本上，当它悬停在特定链接上时，我不希望它执行上述任何操作。
thanks
谢谢
回答by scunliffe
Yes that should work fine, although you likely don't want to set noneunless you really don't want any style... setting your base colors etc. should work fine.
是的，这应该可以正常工作，尽管您可能不想设置，none除非您真的不想要任何样式……设置基色等应该可以正常工作。
#what_we_offer a:hover {
background-color:#fff;/*presuming was originally white*/
text-decoration:none;
color:#000;/*presuming was originally black*/
}
PS I'm not sure if it was just a typo, but your original background-color:none:line was terminated with a colon vs. a semi-colon thus it would have caused issues.
PS 我不确定这是否只是一个错字，但是您的原始background-color:none:行以冒号与分号结尾，因此它会引起问题。
回答by Mo.
#what_we_offer a:hover {
background-color: transparent;
text-decoration: none;
color: none;
}
use transparent instead of none, that works.
使用透明而不是无，那行得通。
thanks for all the answers.
感谢所有的答案。
回答by Pranay Rana
Rather than using id with css use Class
而不是使用 id 和 css 使用 Class
/* for link where you want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you dont want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
回答by esgy
When you want to override CSS values you can do two things: adding new CSS declarations after the one you want to override or using "!important".. So for your problem you can try:
当你想要覆盖 CSS 值时，你可以做两件事：在你想要覆盖的之后添加新的 CSS 声明或使用“！important”..所以对于你的问题，你可以尝试：
a.reset:hover {
background-color: #FFFFFF;
text-decoration: none;
color: #000000;
}
.. and then add the links you want to override this new class:
.. 然后添加要覆盖这个新类的链接：
<a href="#" class="reset">Link with reset</a>
But this CSS class must be declared after you normal "a" tag declarations or this won't work.
但是这个 CSS 类必须在你普通的“a”标签声明之后声明，否则这将不起作用。
Another way is to use !important but I recommend not to abuse this one. But for overriding it's the fastest and safest way to be sure it will work:
另一种方法是使用 !important 但我建议不要滥用这个。但是对于覆盖它是确保它起作用的最快和最安全的方法：
a.reset:hover {
background-color: #FFFFFF !important;
text-decoration: none !important;
color: #000000 !important;
}
.. and this one you can add anywhere in your CSS file and any link with the "reset" class will get those styles: white background, no text decoration and black text.
.. 而这个你可以在你的 CSS 文件中的任何地方添加，任何带有“reset”类的链接都将获得这些样式：白色背景，无文本装饰和黑色文本。
Oh and for the background you cand try: background: none; and will clear all background styles.. background-color, background-image, etc
哦，对于背景，您可以尝试：背景：无；并将清除所有背景样式.. 背景颜色、背景图像等
As a side note.. id's are used to reference a single element and it must be unique.. and classes are used to reference multiple elements. Multiple uses of the same id as you would use a css class.. you can brake javascript and it won't validate your HTML.
作为旁注.. id 用于引用单个元素，它必须是唯一的.. 类用于引用多个元素。多次使用与使用 css 类相同的 id.. 您可以阻止 javascript 并且它不会验证您的 HTML。
回答by GoodSp33d
I think if you do the reverse of what Pranav said, you can have less modifications i,e
我认为如果你做 Pranav 所说的相反的事情，你可以有更少的修改，即
/* for link where you ***DO*** NOT want to change color on hover */
.Link a:hover {
background-color: none:
text-decoration: none;
color: red;
}
/* for link where you want to change color on hover */
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
so you need to add class for a href s in some particular DIVs
所以你需要在一些特定的 DIV 中为 href 添加类
回答by ttchong
Yes but beware that a:hover{} should come before #what_we_offer a:hover {}.
是的，但要注意 a:hover{} 应该在 #what_we_offer a:hover {} 之前。
回答by Harph
You can make use of CSS selectors. The best thing I think you can do is to use the selector not. Let me show you an example:
您可以使用 CSS 选择器。我认为你能做的最好的事情就是使用选择器not。让我给你看一个例子：
<html>
<head>
<style type="text/css">
a:not([not_custom]){
background: #00FF00;
color: #FF0000;
}
</style>
</head>
<body>
<div>
<a href="">Test 1</a>
<a href="" not_custom="">Test 2</a>
<a href="">Test 3</a>
<a href="" not_custom="">Test 4</a>
<a href="">Test 5</a>
<a href="" not_custom="">Test 6</a>
</div>
</body>
</html>
As you can see, I'm defining the astyle using the notselector. So, I'm saying that I want to put a green background and a red color to all the athat doesn't have the attribute not_custom. As a result of this, you can see that Test 1, Test 3 and Test 5 will have the styledefined and Test 2, Test 4 and Test 6 will be normal, without the style.
如您所见，我正在a使用not选择器定义样式。所以，我是说我想为所有a没有属性的元素添加绿色背景和红色not_custom。因此，您可以看到测试 1、测试 3 和测试 5 将具有style定义，而测试 2、测试 4 和测试 6 将是正常的，没有样式。
NOTE: you can define the attribute you want. You don't have to named not_custom. It can be called whateverif you want.
注意：您可以定义所需的属性。您不必命名not_custom. whatever如果你愿意，它可以被调用。
回答by Prashant
a:hover {
background-color: none:
text-decoration: none;
color: none;
}
This is correct.
这是对的。
If you want only particular page, add
如果您只想要特定页面，请添加
body-id a:hover {
background-color: none:
text-decoration: none;
color: none;
}
