如何选择名为“ form-group”的标记中包含的类？

Question

我已经创建了一个弹出表单几个小时。但是我试图选择，但我不能选择标签，标签包含了名为“ form-group”的类标签。实际上，在同一HTML代码文件上还有另一个名为label的类标签。我不想对此产生CSS效果。

index.html

<div class="modal-body">
          <form>
            <div class="form-group">
              <label for="name">Name</label>
              <input type="text" class="form-control">
            </div>
          </form>
          <form>
            <div class="form-group">
              <label for="level">*Which language and what Level- beginner, intermediate, advanced, or business level</label>
              <input type="text" name="level" class="form-control">
            </div>
          </form> 

Style.css

#contactModal {
  display: none;
  color: black;
}
.modal-body {
  color: black;
}
.form-group .label {
  color: #7c7c7c;
}

Answer 1

您可以通过在其上添加类来排除您不想应用CSS规则的元素。检查下面的代码。

HTML

<div class="modal-body">
          <form>
            <div class="form-group">
              <label for="name">Name</label>
              <input type="text" class="form-control">
            </div>
          </form>
          <form>
            <div class="form-group exclude">
              <label for="level">*Which language and what Level- beginner, intermediate, advanced, or business level</label>
              <input type="text" name="level" class="form-control">
            </div>
          </form> 

CSS

.form-group:not(.exclude) label {
  color: #7c7c7c;
}

此css规则仅适用于<label>元素内部但没有类.form-group的那些.exclude元素>