[分享]css匹配差不多的class

CSS是前端开发中不可或缺的重要一环，而样式的匹配更是让开发者头疼的难题之一。当页面中有多个class名差不多的元素需要进行样式的处理时，我们可使用css的一些方法来避免重复劳动。一种方法是给它们全部...

CSS是前端开发中不可或缺的重要一环，而样式的匹配更是让开发者头疼的难题之一。当页面中有多个class名差不多的元素需要进行样式的处理时，我们可使用css的一些方法来避免重复劳动。

一种方法是给它们全部添加相同的class名，然后一起进行样式匹配；但这种方法有一个显而易见的缺点：过于冗余。另一种方法是使用css的通配符来匹配它们的共有父元素，比如：

.parent-class .similar-class {
  /* 样式 */
} 

这样，我们可以仅仅使用相同的.similar-class名，就可以对页面中所有与其父元素具有相同类中的元素进行样式控制，大大减少了代码冗余。

如果我们所需要控制的类名差不多，只是细微的差别，例如颜色或者字体大小等，我们也可以使用通配符的方法，如下：

.similar-class--red {
  color: red;
}
.similar-class--blue {
  color: blue;
}
.similar-class--small {
  font-size: 12px;
}
.similar-class--big {
  font-size: 16px;
} 

这样，我们依然只需要使用唯一的class名similar-class，但在需要变换的属性后面，使用双破折号加上属性值的方式来创建相应的差异化类，从而达到不同样式效果的控制。这种方法能够让我们更加灵活地对页面中相似的元素进行样式编写。