Question

有许多相同级别的CSS样式和带有嵌套块的HTML代码，应用了样式：

.style1 a {
  color: red;
}
.style2 a {
  color: green;
}

<div class="style2">
  <span>
    <a href="/">Style 2</a>
  </span>
  <div class="style1">
    <div>
      <a href="/">Style 1</a>
    </div>
    <div class="style2">
      <a href="/">Style 2</a>
    </div>
  </div>
</div>

结果，第二个链接（“Style 1”）变为绿色。之所以会发生这种情况，是因为链接标记对两个CSS选择器具有相同的特异性，并且稍后会声明.style2 a，因此.style2 a适用。

如何从最近的样式类父项中应用样式，而没有关于标记嵌套的初步信息（以使第二个链接变为红色）？

代码游乐场：http://codepen.io/anon/pen/zvXmOw

可以修改HTML 。但请考虑链接可能在任何地方。

----------

我发现的最佳解决方案基于限制嵌套。首先（与样式父级的链接标记距离有限）：

.style1 > a,
.style1 > :not(.style) > a,
.style1 > :not(.style) > :not(.style) > a {
  color: red;
}
.style2 > a,
.style2 > :not(.style) > a,
.style2 > :not(.style) > :not(.style) > a {
  color: green;
}

<div class="style style2">
  <span>
    <a href="/">Style 2</a>
  </span>
  <div class="style style1">
    <div>
      <a href="/">Style 1</a>
    </div>
    <div class="style style2">
      <a href="/">Style 2</a>
    </div>
  </div>
</div>

第二个（style-divs嵌套有限）：

.style1 a,
.style .style1 a,
.style .style .style1 a {
  color: red;
}
.style2 a,
.style .style2 a,
.style .style .style2 a {
  color: green;
}

<div class="style style2">
  <span>
    <a href="/">Style 2</a>
  </span>
  <div class="style style1">
    <div>
      <a href="/">Style 1</a>
    </div>
    <div class="style style2">
      <a href="/">Style 2</a>
    </div>
  </div>
</div>

我试图找出没有限制的更好的解决方案。

Answer 1

如何使HTML标签为父母的顺序应用具有相同特异性的css选择器？

你不能。 CSS简直就是这样。如果选择器具有相同的特异性，则在样式表顺序中应用规则。你不能改变它。

您可以在链接上使用color: inherit获得所需的效果，并在作为类成员的元素上设置颜色。

直接在锚点上设置类可能更容易。

Answer 2

可以使用CSS variables：

来实现

＆＃13;

a {
  color: var(--link-color);
}
.style1 {
  --link-color: red;
}
.style2 {
  --link-color: green;
}

＆＃13;

<div class="style2">
  <span>
    <a href="/">Style 2</a>
  </span>
  <div class="style1">
    <div>
      <a href="/">Style 1</a>
    </div>
    <div class="style2">
      <a href="/">Style 2</a>
    </div>
  </div>
</div>

＆＃13;

不幸的是，浏览器不支持这项技术。根据{{3}}，87％的用户浏览器都支持它。

Answer 3

这是一个定义问题。最好建立一个链接.green，使.green类名为div来应用他的孩子。好的CSS实践表示最好这样做：

 <a href="" class="green">Green link</a>
 <a href="" class="red">Red link</a>

无论它们在哪里都不重要。如果特定样式是链接的mading，为什么不为它们编写一个好的代码？

Answer 4

最好的方法是删除span和div，如下所示：

<div class="style2">
    <a href="/">Style 2</a>
    <div class="style1">
        <a href="/">Style 1</a>
    <div class="style2">
        <a href="/">Style 2</a>
    </div>
</div>

然后使用这个CSS：

.style1 > a {
    color: red;
}
.style2 > a {
    color: green;
}

小提琴：http://jsfiddle.net/09c6x5pp/

编辑：

如果你想保持跨度和div：

.style1 > a,
.style1 > div > a {
    color: red;
}
.style2 > a,
.style2 > span > a {
    color: green;
}

如何使HTML标签为父母的顺序应用具有相同特异性的css选择器？

4 个答案: