10

使用 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>

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

4

3 回答 3

17

这是我的 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 次，也不算太糟糕。

于 2012-06-08T19:08:20.167 回答
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 作为答案发布，我们也都可以接受。

尽管它可能无济于事，但请注意，您可以使用 XPath实现此目标。

于 2012-06-08T18:46:21.663 回答
-4

这应该只得到第一个子元素.foo：

.foo > .bar

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

于 2012-06-08T19:05:44.517 回答