CSS选择第一个元素，不管它的级别答案

【问题标题】：CSS select first element regardless its levelsCSS选择第一个元素，不管它的级别
【发布时间】：2014-02-02 21:59:52
【问题描述】：

我不能保证我的病情水平，但应该是第一次发病。我几乎可以肯定没有办法，但仅限于断言：

这是一些 HTML 示例：

<div id="container">
  <div class="title"></div>
</div>

所以我的选择器可能是#container .title，但让我们想象.title 可能出现在#container 内的多个级别，并且需要按原样标记，那么更严格地说我是#container > .title。尽管并不总是它会是那个级别中唯一发生的事情，所以我会这样做#container > .title:first-child。

好的，虽然它并不总是第一级，所以我通过#container .title:first-child回归以确保它，但它打破了几个层次：

<div id="container">
  <foo>
    <div class="title"></div>
  </foo>
  <bar>
    <div class="title"></div>
  </bar>
</div>

两者都将被选中，我只想要第一次发生。有没有办法用 CSS 选择器做到这一点？

【问题讨论】：

恐怕不行，这是stackoverflow.com/questions/2751127/…的结论
这是最接近的 css，但在某些情况下它会失败（比如小提琴中的那个）jsfiddle.net/gwa42。如果第一个标题在 div 内，并且在该 div 之外但在另一个 div 内还有其他标题，则无法在文档树中返回。

标签： html css selector

【解决方案1】：

最好的选择是使用 Jquery 或 javascript

$(".title:first").css( "color", "red" );

【讨论】：

是的，但让我们期待更多时间，也许还有其他答案。
这是评论，不是答案。如果您添加一个 javascript 解决方案，那么这将是一个答案，但实际上这根本不能回答问题

【解决方案2】：

您可以使用universal selector。

#container > *:first-child > .title:first-child { color:red; }

小提琴：http://jsfiddle.net/felipemiosso/H5hHj/

已编辑：看看是不是你需要的：http://jsfiddle.net/felipemiosso/H5hHj/3/

编辑2：我不知道你的情况是否允许，但看看：http://jsfiddle.net/felipemiosso/H5hHj/9/

编辑3：经过几次尝试……最终的答案是：不可能=|

【讨论】：

但它可能发生在未知数量的关卡中，例如 #container > .here 或 #container > * > .here 或 #container > * > * > .here 等等...
哦...我明白了。班级名称也可以改变？
我认为这是一个误解：当我读到它时，OP 想要找到 .title 的第一个实例——不管它是嵌套还是 :first-child...
@Tiago 我知道；恐怕这是不可能的 :( — 甚至 CSS4 也没有为此提供 API。
我认为你不能指望在第一组 div 中有一个 .title - 如果没有，这又会中断：jsfiddle.net/H5hHj/10。