有没有一种方法可以允许选定元素上的选择器优先于父元素上的选择器？

问题描述

| 考虑以下示例：http://jsfiddle.net/j6SpZ/ HTML：

<div class=\"container\">
    <a>Foobar</a>
    <a class=\"pink\">Pink</a>
    <a class=\"gray\">Gray</a>
</div>

CSS：

a {
    border: 1px solid black;
    padding: 20px;
    display: block;
}
a.gray { background-color: gray; }
a:hover { background-color: teal; }
.container a { background-color: transparent; }
a.pink { background-color: pink; }

结果： 因此，一切都会按照规范进行。 最后四个选择器上的样式优先级值均为（0,1,1）：1个类+ 1个元素。您将获得预期的第一个和第三个框的透明背景（即使在悬停时也是如此），因为

.container a

在

a.gray

和

a:hover

之后。您在第二个上变粉红色，因为ѭ5紧跟

.container a

之后。太酷了（如果我误解了规范，请告诉我，但我认为我有钱）。 但是我的问题围绕语义的允许性，即允许父元素上的选择器对特异性的影响与修改后元素上的选择器的影响相同。我觉得

gray

类选择器肯定是\“ closer \”，并且比父级上的

container

类选择器更特定于元素，并且

a.gray

样式声明\“ should \”具有更高的优先级。 是否有办法做到这一点，或者我可以遵循一种哲学来解决我的思维中的不和谐？ 实际应用： 我的选项按钮样式总计如下：

.options a { background-color: gray; }
.options a:hover { background-color: blue; }

基本上，选项按钮在悬停时为灰色和蓝色。现在，我想将它们放在一个特殊的区域，在该区域中我希望默认行为具有透明的背景：

.env1 .subenv1 .options a { background-color: transparent; }

但是现在，此声明甚至比ѭ12都具有优先权，我不希望这样做。我仍然希望它的悬停行为相同。我只希望默认背景是透明的。当然，我可以重新声明悬停样式，但这会重复该信息，这是不理想的。我没问题，只是重新声明它，这就是我现在正在做的，但是，当然，必须有一种方法可以使它在我的脑海中变得有意义。     

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）