[分享]css两个class选择

在CSS中，我们可以使用“两个class选择器”（也称为“复合选择器”）来选择同时具有多个class的元素。/ 两个class选择器的语法：/ .class1.class2 { /样式声明/ } 如上...

在CSS中，我们可以使用“两个class选择器”（也称为“复合选择器”）来选择同时具有多个class的元素。

/* 两个class选择器的语法：*/
.class1.class2 {
  /*样式声明*/
} 

如上，我们可以通过在两个class之间加上一个点号来选择同时具有这两个class的元素。

<div class="class1 class2">
  <p>这个div具有class1和class2</p>
</div> 

在上面的示例中，div元素具有两个class：“class1”和“class2”。由于这两个class在选择器中被连字符“-”连接，因此CSS会选择同时具有这两个class的元素。

两个class选择器非常有用，因为它们允许我们更精确地选择元素，使得样式更具有可读性和可维护性。例如：

/* 选择同时具有 "header" 和 "dark-mode" class的元素 */
.header.dark-mode {
  background-color: black;
  color: white;
} 

在上面的示例中，只有同时具有“header”和“dark-mode”class的元素才会应用这些样式声明。这样我们就可以轻松地切换页面主题而不必影响所有的header元素。