在编写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样式表时,鼓励使用能够多次引用样式的选择器,以减少代码冗余。
粉丝
0
关注
0
收藏
0