Question

有没有结合两个选择器？如：

#div:hover:not(.class)

编辑：

我在写作时理解这项工作。但是，如何为“LI”元素实现“悬停”效果，但当鼠标超过LI内的某个“DIV”时排除悬停效果？

E.G。

<li>Hello   <div id="#no-hover">Bye</div>  </li>

我想为li获得悬停效果：

li:hover{ text-color:#CCC; }

但是当鼠标悬停在#no-hover div上时，不知何故会排除悬停效果。

有什么想法吗？

Answer 1

根据您的问题编辑，为了最大化浏览器兼容性（我的意思是，为什么不，如果可以的话？）你可以完全不使用CSS3选择器。试试这个，假设黑色是默认的文字颜色：

li, li:hover div#no-hover {
    color: #000;
}

li:hover {
    color: #ccc;
}

如果您想要影响具有no-hover分类的多个元素，您可能希望使用类而不是ID。在这种情况下，您将为您的第一条规则执行此操作：

li, li:hover div.no-hover {

无论哪种方式，因为选择具有其祖先的后代比仅仅选择祖先更具体，假设祖先上有相同的组合子，它将覆盖第二个规则，即使这个更晚出现。

Answer 2

<强>更新

如果您只想让悬停效果不适用于Bye，那么您可以为此创建额外的悬停规则并明确设置颜色（如其他答案所示）

如果悬停效果不适用于整个li元素，那么我认为没有办法实现。你需要某种父选择器，它在CSS中不存在。

是的，尝试相当容易：http://jsfiddle.net/5vaUW/

（可能仅在您的浏览器支持CSS3时才有效）

您可能想要了解有关CSS3 selectors的更多信息，您可以在这里找到：

选择器是由组合子分隔的一个或多个简单选择器序列的链。一个伪元素可以附加到选择器中的最后一个简单选择器序列。

一系列简单的选择器是一系列简单的选择器，它们没有被组合器分开。它始终以类型选择器或通用选择器开头。序列中不允许使用其他类型选择器或通用选择器。

简单的选择器是类型选择器，通用选择器，属性选择器，类选择器，ID选择器或伪类。

Answer 3

在css2中，将是：

    li:hover{
       color:#CCC;
    }

     li:hover div{
     color: #000;   
    }

对于CSS3，我同意Felix Kling。

在CSS3中组合两个选择器

3 个答案: