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

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 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样式表时,鼓励使用能够多次引用样式的选择器,以减少代码冗余。

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中定义能够多次引用样式的选择器

粉丝

0

关注

0

收藏

0

已有0次打赏