CSS目标特定的类 [英] CSS target specific class

问题描述

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

I am attempting to target a specific class which is the first class name inside a div. The attempt I have made looks like the following:

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

如您所见，我只想定位容器流体标记中的第一行，但要填充

As you can see i want to target only the first row inside the container-fluid tag but the padding is also getting applied to the row inside the col-3 class.

可以将我指向正确的方向。

Could somone point me in the right direction.

推荐答案

应该是

.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 ，它是容器流体的直接子级，除非您还有另一个行，它也是容器流体的直接子代，则可以使用第一个代码段仅定位第一个 row 个孩子。

But the 2nd snippet is more preferable, it is because you are targeting .row that is the direct child of container-fluid, unless you have another row that is also a direct child of container-fluid, you can use the 1st snippet to only target the first row child.

> 以父级的直接子对象为目标，无论是否有一个在层次结构中名称较低的类

> is used to target the direct child of a parent, regardless if there is a class that has the same name lower in the hierarchy

.parent > .someClass {
  color: blue;
}

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

删除> ，两个文本均为蓝色

Remove > and both text will be blue

这篇关于CSS目标特定的类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！