选择第二级的第一个孩子

Question

我需要在div .tGrid-row-two中选择类.tGrid-item的第一个div，但是：first-child选择我每个.tGrid-row-two的第一个t-Grid项。 / p>

我正在使用sass

代码示例：

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以将first-child个选择器串在一起：

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

正如@ j08691指出的那样，只有当.tGrid-item是.tGrid-row-two的直接后代并且除了.tGrid-item类的其他元素之外没有其他兄弟姐妹时，这才有效。 / p>

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

基本上，像这样：

＆＃13;

＆＃13;

.tGrid-row-two:first-child .tGrid-item:first-child {
    color:red;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;