在CSS3中组合两个选择器 [英] Combining two selectors in CSS3

问题描述

有没有组合两个选择器？例如：

  #div：hover：not（.class）
  pre> 
 
 
 
 
 
编辑：
 
 
 
写道。但是，如何在LI元素上实现悬停效果，但是当鼠标在LI内部的某个DIV上方时，悬停效果会被排除？
 
 
 
 EG 
 < li> Hello< div id =＃no-hover> Bye< / div> < / li> 
  
 
 
我希望获得li的悬停效果：
  li：hover {text-color：#CCC;} 
  
  
 
 
 
但是不知何故，当鼠标悬停在＃no-hover div上方时， > 
 
解决方案
根据您的问题编辑，最大限度地提高浏览器兼容性（我的意思是，为什么不你可以不使用CSS3选择器，试试这个，假设黑色是默认的文字颜色：
  li，li ：hover div＃no-hover {
 color：＃000; 
} 
 
 li：hover {
 color：#ccc; 
} 
  
虽然你可能希望使用类而不是ID，如果你想影响多个元素， c $ c> no-hover 分类。在这种情况下，您可以改用第一个规则：
  li，li：hover div.no-hover {
 
无论如何，由于选择具有其祖先的后代比仅选择祖先更具体，假设相同的组合器在祖先它将覆盖第二条规则，即使那个稍后。
 
Is there anyway to combine two selectors? such as:   
#div:hover:not(.class)




Edit:

I understand this work as I wrote. However, how can I achieve a "hover" effect for a "LI" element , but exclude the hover effect when the mouse is over a certain "DIV' inside the LI?

E.G.
<li>Hello   <div id="#no-hover">Bye</div>  </li>
I would like to get a hover effect for the li:
li:hover{ text-color:#CCC; }
but somehow exclude the hover effect when the mouse is over the #no-hover div.

Any ideas?
解决方案
Based on your question edit, to maximize browser compatibility (I mean, why not if you can?) you can get away with not using CSS3 selectors at all. Try this, assuming black is the default text color:
li, li:hover div#no-hover {
    color: #000;
}

li:hover {
    color: #ccc;
}
Although you may want to use a class instead of an ID if you want to affect multiple elements with a no-hover classification. In which case you would do this instead for your first rule:
li, li:hover div.no-hover {
Either way, since selecting a descendant with its ancestor is more specific than selecting just the ancestor, assuming the same combinators on the ancestor it'll override the second rule even though that one comes later.

                        
这篇关于在CSS3中组合两个选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！