Question

我试图定位一个特定的类，它是div中的第一个类名。我的尝试如下所示：

.container-fluid:first-child div.row {
    padding-top: 200px;
}

CSS的HTML。

<div class="container-fluid">
    <div class="row justify-content-md-center"> <<TRYING TO TARGET
        <div class="col-3 text-center">
            <div class="row">
                <img src="/assets/images/fssLogo.png"/>
            </div>
        </div>
    </div>
</div>

正如您所看到的，我想仅定位容器流体标记内的第一行，但填充也会应用于col-3类中的行。

可能会让我指出正确的方向。

Answer 1

应该是

.container-fluid >.row:first-child {
    padding-top: 200px;
}

.container-fluid > .row:first-child {
  background-color: red;
  padding-top: 200px;
}

.innerRow {
  background-color: pink;
}

<div class="container-fluid">
  <div class="row justify-content-md-center">
    <div class="col-3 text-center">
      <div class="row innerRow">
        <img src="http://via.placeholder.com/350x150" />
      </div>
    </div>
  </div>
</div>

或者

.container-fluid >.row {
    padding-top: 200px;
}

.container-fluid > .row {
  background-color: red;
  padding-top: 200px;
}

.innerRow {
  background-color: pink;
}

<div class="container-fluid">
  <div class="row justify-content-md-center">
    <div class="col-3 text-center">
      <div class="row innerRow">
        <img src="http://via.placeholder.com/350x150" />
      </div>
    </div>
  </div>
</div>

但第二个代码段更为可取，因为您定位的.row是container-fluid的直接子项，除非您有另一个row，它也是container-fluid的直接子项row，您可以使用第一个代码段仅定位第一个>孩子。

.parent > .someClass { color: blue; }用于定位父项的直接子项，无论层次结构中是否存在具有相同名称的类

<div class="parent">
  <p class="someClass">TARGETED</p>
  <div>
    <p class="someClass">NOT TARGETED</p>
  </div>
</div>

删除{{1}}，两个文字都是蓝色

CSS目标特定类

1 个答案: