Question

使用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中的第一个.foo（无论中间有多少个子元素或兄弟元素），而不是第二个或第三个.bar。

Answer 1

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

Answer 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发布他的黑客作为答案，我们都可以接受这一点。

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

Answer 3

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

.foo > .bar

而不是选择链条的任何一个。

CSS选择最近的后代？

3 个答案: