Question

我必须在css中获得一些标签，但是只有少数几个类需要传递给我想要的类。我有2页，但是我只需要更改一页，而且我认为这是可能的，因为班级之间几乎没有差异。这是两者的HTML代码。

<div class="col-sm-4">
  <div class="form-group has-input-icon  ">
   <label for="">Check in</label> <!--This label i need to catch-->

第二

<div class="col-sm-6">
  <div class="form-group has-input-icon search-destination">
   <label for="">Destination</label>

必须从第一个代码中获取标签，那么如何使用CSS获取此类？像.col-sm-4-> form-group-> has-input-icon-> label这样的东西，我需要捕获所有这些类以更具体地说明我需要更改的内容，如何编写它？

Answer 1

定位第一个元素：

.col-sm-4 .form-group label {
    background:red
}

定位第二个元素：

.col-sm-4 .form-group.search-destination label {
    background:orange
}

要定位第一个，但要排除第二个，或其他：

.col-sm-4 .form-group:not(.search-destination) label {
    background:orange
}

Answer 2

尝试一下。

.col-sm-4 > .form-group.has-input-icon > label {
  color: red;
}

.col-sm-6 > .form-group.has-input-icon.search-destination > label {
  color: blue;
}

<div class="col-sm-4">
 <div class="form-group has-input-icon  ">
  <label for="">Check in</label> <!--This label i need to catch-->
 </div>
</div>
   
<div class="col-sm-6">
 <div class="form-group has-input-icon search-destination">
  <label for="">Destination</label>
 </div>
</div>

说明：

>的意思是“一级孩子”
多个选择器，没有空格或其他分隔符意味着所有这些选择符都必须应用于相同的元件。示例：.form-group.has-input-icon.search-destination 表示所有这三个类都必须位于所选元素上。

CSS获取类

2 个答案: