CSS选择最近的后代？答案

【问题标题】：CSS to select nearest descendent?CSS选择最近的后代？
【发布时间】：2012-06-12 09:12:12
【问题描述】：

使用 CSS，有没有办法选择与某个选择器匹配的元素最近的后代？

<div class="foo"> <!-- if we're inside this -->
  <div>
    <br />
    <div class="bar"> <!-- match this -->
      <div class="bar"> <!-- but not this -->
        <div class="bar"> <!-- or this -->
        </div>
      </div>
    </div>
    <div class="bar"> <!-- I don't really care whether we match this -->
    </div>
  </div>
</div>

也就是说，会选择任何.foo 中的第一个.bar（无论中间有多少子元素或兄弟元素），但不会选择第二个或第三个.bar。

【问题讨论】：

如果您有第二个.bar 是您要选择的那个的兄弟，您是否也希望它被选中？
最好不要，但这也是可以接受的。
这是我唯一能想到的：jsfiddle.net/thirtydot/gqJdP。有点hacky。
@JW 我认为您需要使用更强大的测试用例来编辑您的问题，并明确指出哪些项目应该匹配和不应该匹配。
@thirtydot 不错！我是按照这些思路思考的，但不能完全正确哈哈。您应该将其发布为答案，我肯定会投赞成票！

标签： css css-selectors

【解决方案1】：

这是我的 hacktastic 答案：http://jsfiddle.net/thirtydot/gqJdP/2/

/*repeat for as many levels as there could be*/
.foo > .bar,
.foo > :not(.bar) > .bar,
.foo > :not(.bar) > :not(.bar) > .bar {
    border-color: blue;
}
.bar {
    border: 1px solid red;
    padding: 10px;
}

引用我自己的评论：

我的建议是可行的，尽管令人反感，如果您可以在.foo 和您想要匹配的.bar 之间设置可能的父母数量上限。即使你不得不重复选择器（比如说）10 次，也不算太糟糕。

【讨论】：

粉丝-hackin'-tastic！我不想在我自己的 CSS 中使用它哈哈 :)
@StephRose：不完全是。仔细检查选择器。我假设它是.foo 的直接子代，或者不是.bar 的任何东西的直接子代，它是.foo 的直接子代，或者。跨度>
@thirtydot 哈！现在我明白了。我想我今天一定是脑残了。我从来没有听说过:not，这很整洁。这对我来说是一个很好的教训。另外，我希望 OP 的深度不会超过 5 层……

【解决方案2】：

不，仅使用 CSS 无法完全完成您的要求。您可以选择nth-child 或nth-of-type，但不能选择the-nth-item-matching-this-selector。

作为“证明”，请查看可用的 CSS3 选择器列表（其中涵盖了 CSS1 和 CSS2.1 的所有功能）：
http://www.w3.org/TR/selectors/

您将需要使用 JavaScript（在客户端）或服务器端操作（例如，使用特殊类注释第一个此类项目）。

编辑：根据您的编辑，您可以：

.foo .bar      { font-weight:bold; color:red }
.foo .bar .bar { font-weight:normal; color:black }

即您需要明确“撤消”应用于将被继承的祖先的样式。这是“脆弱的”——如果您更改祖先的样式，您需要确保也更改相应“覆盖”规则的值——但有效。

而且，如果 @thirtydot 发布他的 hack 作为答案，我们也都可以接受。

虽然它可能没有帮助，但也请注意，您可以实现此目标with XPath。

【讨论】：

我们应该在 CSS4 中得到 nth-matching（无论何时），但我看不出在这种情况下会有什么帮助。
@animuson 加上nth-matching 就是.foo .bar:nth-matching(1)，对吧？
关于撤消的好建议。

【解决方案3】：

这应该只获取.foo的第一个子元素：

.foo > .bar

并且不要选择更远的链条。

【讨论】：

-1 如示例代码所示，.bar 不一定是直接子节点。
是的。没看到那个。并不是说 div 应该在 p 标签内。
@StephRose：是的，你是对的。我在答案的演示中修复了它。