css - 应用较低特异性样式，而不是较高特异性悬停

Question

正如你在这里看到的：什么？

.wrapper-dropdown .label正在应用选择器，而不是更高的特异性.wrapper-dropdown .dropdown li div.liwrap:hover

这是为什么？如果相关的话，我在 osx 10.8 上使用 chrome

-编辑

这个少：http
://hastebin.com/feyurojusa.avrasm 编译成这个 css：http ://hastebin.com/dihimuquju.css

还有这个Jade：http
://hastebin.com/sipetaqigu.vhdl 编译到这个 html：http ://hastebin.com/sufavolumo.xml

Addtionally 我有这个小 JavaScript 处理点击事件：http ://hastebin.com/sufavolumo.xml

score 3 · Accepted Answer

指定的元素与指定的.label元素不同div.liwrap；相反，.label是div.liwrap的后代之一。然后特异性变得无关紧要，因为选择器完全匹配不同的元素。

删除线仅仅意味着div.liwrap祖先的color被取消而不是被继承，因为你给出.label了自己的color声明。

如果.label要从div.liwrap悬停继承，则需要在 LESS 代码中修改以下规则：

  .dropdown li div.liwrap:hover {
    border-color: #00aeef;
    color: #00aeef;
  }

对于这样的事情：

  .dropdown li div.liwrap:hover {
    border-color: #00aeef;
    color: #00aeef;
    .label {
      color: #00aeef; // Or color: inherit;
    }
  }

1 回答 1