使用引用类将css应用于目标类

Question

我想定位col-sm-5 col-md-5类来申请自定义css：

<div class="container extra-info">
   <div class="row">
     <div class="col-sm-5 col-md-5">
     </div>
   </div>
</div>

Answer 1

这就是我将如何选择第一个.col-sm-5

.extra-info:first-child > .row > .col-sm-5 {
  background-color: red;
}

<div class="container extra-info">
   <div class="row">
     <div class="col-sm-5 col-md-5">
     test
     </div>
   </div>
</div>

<div class="container extra-info">
   <div class="row">
     <div class="col-sm-5 col-md-5">
     test
     </div>
   </div>
</div>

Answer 2

您需要拥有ID才能应用目标。首先添加id：

<div class="container extra-info">
   <div class="row">
     <div class="col-sm-5 col-md-5" id="target">
     </div>
   </div>
</div>

现在您可以使用伪选择器：

#target::target {
  background: #f00;
}

您只需导航至：/path/to/file#target。

如果您只是想要定位该元素，那么就像：

一样简单

• 添加新的class。
• 添加新的id。

因此，对于其中任何一个，请尝试执行以下操作：

使用class

的解决方案

<div class="container extra-info">
   <div class="row">
     <div class="col-sm-5 col-md-5 target">
     </div>
   </div>
</div>

使用CSS：

.target {
  background: #f00;
}

使用id

的解决方案

<div class="container extra-info">
   <div class="row">
     <div class="col-sm-5 col-md-5" id="target">
     </div>
   </div>
</div>

使用CSS：

#target {
  background: #f00;
}