[分享]css中class一部分相同

CSS中的Class是一种非常重要的选择器，允许我们将多个元素组合在一起，以便在样式表中对它们进行统一的样式编辑。在编写CSS时，我们经常会遇到Class的部分名称相同的情况。这时候，我们可以通过以下...

CSS中的Class是一种非常重要的选择器，允许我们将多个元素组合在一起，以便在样式表中对它们进行统一的样式编辑。在编写CSS时，我们经常会遇到Class的部分名称相同的情况。这时候，我们可以通过以下几种方法来处理：

/* 1. 使用通配符 */
[class^="common"] {
  /* 样式 */
}

/* 2. 使用某些CSS预处理语言所提供的函数 */
.common-* {
  /* 样式 */
}

/* 3. 使用更具体的选择器 */
.header-common {
  /* 样式 */
}

.button-common {
  /* 样式 */
} 

以上是三种常用的处理方式，下面我们将逐一介绍。

使用通配符

使用通配符是一种比较万能的方式，它可以匹配所有Class名称以特定字符串开头的元素。在本例中，我们使用的是以“common”开头的Class名称。

[class^="common"] {
  /* 样式 */
} 

使用某些CSS预处理语言所提供的函数

一些CSS预处理语言，例如Sass或Less，提供了特定的函数来过滤出部分相同的Class名称。例如在Sass中，我们可以使用通配符“*”来匹配任意内容，例如：“.common-*” 就表示以 “common-” 开头的Class名称。

.common-* {
  /* 样式 */
} 

使用更具体的选择器

在有些情况下，我们可能需要为相同的Class名称在不同的元素中应用不同的样式，这时候我们可以为它们各自添加一个更具体的选择器来统一控制。

.header-common {
  /* 样式 */
}

.button-common {
  /* 样式 */
} 

虽然以上三种方式都可以有效地解决相同Class名称的问题，每种方式的实际使用和效果都会有所差异，因此在具体情况下，我们需要根据实际情况来选择最适合的方式来解决。