如何选择名为 "form-group" 的标签中包含的类？

Question

我已经创建了一个弹出表单好几个小时了。然而我试图选择，我无法选择标签，标签包含了名为"的类标签；形成组"；。实际上，在同一个HTML代码文件上还有另一个名为label的类标记。我不想在上面做CSS效果。

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

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

Answer 1

.form-group .label应用于类label的每个标记，该标记是类form-group的标记的子标记，但您的标签没有类label。因此，您需要添加该类，或者使用选择器.form-group > label，该选择器适用于<label>类型的每个标记，该标记是form-group类标记的子标记。

Answer 2

您可以通过在不想应用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规则将仅适用于.form-group元素内部的<label>元素，而不包含类.exclude