Html 如何在 CSS 选择器中排除特定的类名？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16201948/
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
How to exclude particular class name in CSS selector?
提问by Meow
I'm trying to apply background-color when a user mouse hover the element whose class name is "reMode_hover".
当用户鼠标悬停在类名称为"reMode_hover".
But I do not want to change color if the element alsohas "reMode_selected"
但如果元素也有，我不想改变颜色"reMode_selected"
Note: I can only use CSS not javascript because I'm working within some sort of limited environment.
注意：我只能使用 CSS 而不是 javascript，因为我在某种有限的环境中工作。
To clarify, my goal is to color the first element on hover but not the second element.
澄清一下，我的目标是在悬停时为第一个元素着色，而不是为第二个元素着色。
HTML
HTML
<a href="" title="Design" class="reMode_design reMode_hover">
<span>Design</span>
</a>
<a href="" title="Design"
class="reMode_design reMode_hover reMode_selected">
<span>Design</span>
</a>
I tried below hoping the first definition would work but it is not. What am I doing wrong?
我在下面尝试过，希望第一个定义有效，但事实并非如此。我究竟做错了什么？
CSS
CSS
/* do not apply background-color so leave this empty */
.reMode_selected .reMode_hover:hover
{
}
.reMode_hover:hover
{
background-color: #f0ac00;
}
回答by Explosion Pills
One way is to use the multiple class selector (no space as that is the descendant selector):
一种方法是使用多类选择器（没有空格，因为这是后代选择器）：
.reMode_selected.reMode_hover:hover
{
background-color: transparent;
}
Another would be to use the :not()selector
另一种方法是使用:not()选择器
.reMode_hover:not(.reMode_selected):hover
{
background-color: #f0ac00;
}
回答by imsky
In modern browsers you can do:
在现代浏览器中，您可以执行以下操作：
.reMode_hover:not(.reMode_selected):hover{}
Consult http://caniuse.com/css-sel3for compatibility information.
有关兼容性信息，请参阅http://caniuse.com/css-sel3。
回答by Cody Guldner
Method 1
方法一
The problem with your code is that you are selecting the .remode_hoverthat is a descendantof .remode_selected. So the first part of getting your code to work correctly is by removing that space
与您的代码的问题是，你选择的.remode_hover是一个后代的.remode_selected。因此，让您的代码正常工作的第一部分是删除该空间
.reMode_selected.reMode_hover:hover
Then, in order to get the style to not work, you have to override the style set by the :hover. In other words, you need to counter the background-colorproperty. So the final code will be
然后，为了使样式不起作用，您必须覆盖:hover. 换句话说，你需要反击background-color财产。所以最终的代码将是
.reMode_selected.reMode_hover:hover {
background-color:inherit;
}
.reMode_hover:hover {
background-color: #f0ac00;
}
Method 2
方法二
An alternative method would be to use :not(), as stated by others. This will return any element that doesn't have the class or property stated inside the parenthesis. In this case, you would put .remode_selectedin there. This will target all elements that don't have a class of .remode_selected
另一种方法是使用:not()，如其他人所述。这将返回没有括号内声明的类或属性的任何元素。在这种情况下，你会放在.remode_selected那里。这将针对所有没有类的元素.remode_selected
However, I would not recommend this method, because of the fact that it was introduced in CSS3, so browser support is not ideal.
但是，我不会推荐这种方法，因为它是在 CSS3 中引入的，因此浏览器支持并不理想。
Method 3
方法三
A third method would be to use jQuery. You can target the .not()selector, which would be similar to using :not()in CSS, but with much better browser support
第三种方法是使用 jQuery。您可以定位.not()选择器，这类似于:not()在 CSS 中使用，但具有更好的浏览器支持
