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

【问题标题】：Lower specificity style being applied, instead of higher specificity hover应用较低特异性样式，而不是较高特异性悬停
【发布时间】：2013-03-19 18:23:16
【问题描述】：

正如您在此处看到的：

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

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

-编辑

另外，我还有这个处理点击事件的小 JavaScript：http://hastebin.com/sufavolumo.xml

【问题讨论】：

【解决方案1】：

.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;
    }
  }

【讨论】：