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>

正如您所看到的,我想仅定位容器流体标记内的第一行,但填充也应用于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>

删除>,两个文本都将为蓝色