[分享]css中定义能够多次引用样式的选择器

在编写CSS样式表时，我们通常需要定义一些被多个元素共用的样式，例如文本颜色、字体大小等。为了避免在CSS样式表中重复定义相同的样式，CSS提供了一些能够多次引用的选择器。下面介绍几种常见的能够多次引...

在编写CSS样式表时，我们通常需要定义一些被多个元素共用的样式，例如文本颜色、字体大小等。为了避免在CSS样式表中重复定义相同的样式，CSS提供了一些能够多次引用的选择器。

下面介绍几种常见的能够多次引用样式的CSS选择器：

.class1, .class2, .class3 {
  font-size: 16px;
  color: #333;
} 

使用逗号将多个类名组合在一起，这些类名所对应的元素都会应用这些样式。例如，下面的HTML代码中class为class1的p标签和class为class2的span标签都会有16px字体大小和#333颜色：

<p class="class1">Hello, World!</p>
<span class="class2">Nice to meet you.</span> 

而class为class3的元素也会应用这些样式，例如：

<div class="class3">
  <p>Hello, World!</p>
  <span>Nice to meet you.</span>
</div> 

除了类选择器，还可以使用属性选择器多次引用样式：

a[href^="https"], a[href^="http"] {
  color: blue;
  text-decoration: none;
} 

这段CSS代码定义了当a标签的href属性以https或http开头时，应用蓝色字体和取消下划线样式。例如：

<a href="https://example.com">Secure link</a>
<a href="http://example.com">Unsecure link</a> 

除了以上介绍的选择器，还有伪类选择器和伪元素选择器等都能够多次引用样式。在编写CSS样式表时，鼓励使用能够多次引用样式的选择器，以减少代码冗余。