css - 选择第二级的第一个 child

Question

我需要在 div .tGrid-row-two 中选择第一个带有类 .tGrid-item 的 div，但是使用 :first-child 选择每个 .tGrid-row-two 的第一个 t-Grid-item

我正在使用 sass

代码示例:

<div class="tGrid">
  <div class="tGrid-row-four">
    <div class="tGrid-row-two">
      <div class="tGrid-item">
        this is the one I want to select
      </div>
      <div class="tGrid-item">
        no select
      </div>
    </div>
    <div class="tGrid-row-two">
      <div class="tGrid-item">
        no select
      </div>
      <div class="tGrid-item">
        no select
      </div>
    </div>
  </div>
  <div class="tGrid-row-four">
    <div class="tGrid-row-two">
      <div class="tGrid-item">
        this is the one I want to select
      </div>
      <div class="tGrid-item">
        no select
      </div>
    </div>
    <div class="tGrid-row-two">
      <div class="tGrid-item">
        no select
      </div>
      <div class="tGrid-item">
        no select
      </div>
    </div>
  </div>
</div>

Answer 1

您可以像这样将 first-child 选择器串在一起:

.tGrid-row-two:first-child .tGrid-item:first-child { }

正如@j08691 所指出的，只有当 .tGrid-item 是 .tGrid-row-two 的直接后代并且它之前没有兄弟时，这才有效除了具有 .tGrid-item 类的其他元素。

.tGrid-row-two:first-child .tGrid-item:first-child {
  background:blue;
  color:#fff;
}

<div class="tGrid">
	<div class="tGrid-row-four">
		<div class="tGrid-row-two">
			<div class="tGrid-item">
				this is the one I want to select
			</div>
			<div class="tGrid-item">
				no select
			</div>
		</div>
		<div class="tGrid-row-two">
			<div class="tGrid-item">
				no select
			</div>
			<div class="tGrid-item">
				no select
			</div>
		</div>
	</div>
	<div class="tGrid-row-four">
		<div class="tGrid-row-two">
			<div class="tGrid-item">
				this is the one I want to select
			</div>
			<div class="tGrid-item">
				no select
			</div>
		</div>
		<div class="tGrid-row-two">
			<div class="tGrid-item">
				no select
			</div>
			<div class="tGrid-item">
				no select
			</div>
		</div>
	</div>
</div>