jquery - 仅匹配纯 CSS 中的第一个后代？

Question

纯 css 中是否有一种优雅的方式来仅匹配第一个后代——类似于 jquery first()？

在 jQuery 中：

$(".outer .title").first();

标记会有所不同，因此使用直接后代 > 选择器是不可靠的。

<div class="outer">
  <div class="title"></div>
  <div class="inner">
     <div class="title" />
  </div>
</div>

谢谢！

Answer 1

查找 CSS 选择器 - W3Schools CSS 选择器

这可能是您正在寻找的东西：
.outer .thing:first-child {}

你也可以试试nth-child()

Answer 2

更新：此答案基于已在问题中编辑的结构：

<div class="outer">
    <div class="thing">
        <div class="inner">
            <div class="thing" />
        </div>
    </div>
</div>

使用这样的嵌套，如果对象在其内部，最好的选择是恢复样式；

.outer .thing { /* styles */ }
.thing .thing { /* revert styles */ }

使用这样的结构：

<div class="outer">
    <div class="thing" />
    <div class="inner">
        <div class="thing" />
    </div>
</div>

你有更少的选择；

/* assume thing will always be a direct child of outer */
.outer > .thing {}

/* assume thing will always be the VERY FIRST child of outer */
.outer > thing:first-child {}

/* assume thing will always be inside the VERY FIRST child of outer */
.outer > .thing:first-child, .outer > *:first-child .thing {}

/* assume the thing you don't want will always be inside inner */
.outer .thing {}
.inner .thing { /* revert styles */ }

不过，这两种结构都很愚蠢。这看起来像标题/子标题，在这种情况下你可以这样做：

<header>
    <h1></h1>
    <p></p>
</header>

或者

<hgroup>
    <h1></h1>
    <h2></h2>
</hgroup>

或远离标准标签：

<div class="outer">
    <div class="title" />
    <div class="subtitle" />
</div>

or using multiple classes

<div class="outer">
    <div class="title maintitle" />
    <div class="inner">
        <div class="title subtitle" />
    </div>
</div>