html - CSS 目标特定类

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>

如您所见，我只想定位 container-fluid 标签内的第一行，但填充也应用于 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>

删除 > 两个文本都会变成蓝色