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

Posted 2023-03-06

【中文标题】如何使具有相同特性的 css 选择器按 HTML 标签父级的顺序应用？

【英文标题】：How to make css selectors with the same specificity be applied in order of HTML tags parenthood?

【发布时间】：2016-02-25 08:22:36

【问题描述】：

有一堆相同级别的 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>

因此，第二个链接（«样式 1»）变为绿色。发生这种情况是因为链接标记对 CSS 选择器具有相同的特异性，并且稍后声明了 .style2 a，因此应用了 .style2 a。

如何在没有关于标签嵌套的初步信息的情况下从最近的样式类父应用样式（使第二个链接变为红色）？

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

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

—————————

我发现的最佳解决方案是基于限制嵌套。首先（从 style-parent 的链接标签距离是有限的）：

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

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

【问题讨论】：

使用 .style1 > a color: red; .style2 > a 颜色：绿色；

@KishoreSahas ，它甚至不会为链接着色（最后一个除外）。链接可以出现在 style-div 中的任何位置。

我同意，我误解了这个问题

@DanielTate 浏览器兼容性是必需的。我已经更新了我的答案。

【参考方案1】：

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

你不能。 CSS 根本不能那样工作。如果选择器具有相同的特异性，那么规则将按样式表顺序应用。你无法改变它。

您可以在链接上使用color: inherit 并为作为类成员的元素设置颜色来实现您想要的效果。

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

【讨论】：

这个想法是在不改变 HTML 的情况下将样式主题应用于卡片。主题影响一组标签和类。卡片可以嵌套。所以我试图找出在不将类应用于目标元素的情况下是否有任何技巧。

@Finesse — 正如我所说：不，没有。

存在但嵌套有限（请参阅更新的问题）。

@Finesse — 嗯，是的，但是您最初的问题排除了这种可能性，并且很快就会变得愚蠢笨拙。

我提到你可以修改 HTML 代码。我的英语听不懂吗？

【参考方案2】：

可以使用CSS variables实现：

a 
  color: var(--link-color);

.style1 
  --link-color: red;

.style2 
  --link-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>

该技术已被浏览器广泛支持，未来将得到更广泛的支持。

【参考方案3】：

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

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

它们在哪里并不重要。如果特定的样式是为链接制作的，为什么不为它们写一个好的代码呢？

【讨论】：

这个想法是在不改变 HTML 的情况下应用样式主题来阻止。主题影响一组标签和类。

一个主题是只应用一个主题，而不是两个。如果您需要应用两个主题，那么您还没有主题系统。

有可以嵌套的嵌套块（例如卡片）。父卡片有它自己的需要样式化的内容。并且这张卡片有子卡片，内容也需要样式化。

【参考方案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/

编辑：

如果要保留span和div：

.style1 > a,
.style1 > div > a 
    color: red;

.style2 > a,
.style2 > span > a 
    color: green;

【讨论】：

链接可以在任何地方

那么我建议将类放在链接本身而不是父母上。唯一的办法。