如何选择div内的常用CSS类？如何选中formblock2下的.formlabel类

1. 如何选择div元素内部的常用CSS类？ #

可以根据元素层级关系，使用不同类型的CSS选择器实现：

• 后代选择器：选中div元素内所有层级的目标类，语法为 div .目标类名。比如要选中所有div里的.formlabel，可编写 div .formlabel。
• 直接子元素选择器：仅选中div的直接子元素中的目标类，语法为 div > .目标类名。比如只选div直接子元素下的.formlabel，编写 div > .formlabel。
• 带父类限定的选择器：如果要指定某个带类的div内部的目标类，语法为 .父类名 .目标类名。比如选中.formblock2下的.formlabel，就是 .formblock2 .formlabel。

2. 如何选中class为formblock2的元素下的.formlabel类并修改颜色？ #

使用后代选择器通过父类限定目标元素，编写如下CSS代码即可覆盖原有样式：

.formblock2 .formlabel {
  color: green;
}

该选择器优先级高于全局的.formlabel规则，只会将formblock2下的Heading B颜色改为绿色，其余.formlabel元素（Heading A、Heading C）仍保持红色。

完整示例代码 #

CSS代码：

.formlabel {color:red;}
.formblock2 .formlabel {color:green;}

HTML代码：

<div class="form">
  <div class="formblock1">
    <div class="formlabel">Heading A</div>
  </div>
  <div class="formblock2">
    <div class="formlabel">Heading B</div>
  </div>
  <div class="formblock3">
    <div class="formlabel">Heading C</div>
  </div>
</div>

内容的提问来源于stack exchange，提问作者user3325687