如何同时应用样式到多个类?
为了同时应用样式到多个类,我们将使用点(.) 选择器和逗号(,)。在本文中,我们将使用点(.) 选择器并使用选择器选择所有具有其类名的元素,并用逗号(,) 分隔。
“类”是一个 HTML 属性,它接受用空格分隔的类列表。然后,这些类可以在 CSS 中用于设置特定元素的样式,或者在 Javascript 中用于操作这些 HTML 元素。
示例 1
在这个例子中,我们将把字体颜色“红色”应用于具有“header”和“para”类的 HTML 元素。我们将使用点(.) 选择器并将它们与逗号(,) 连接来实现这一点。
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to apply styles to multiple classes at once?</title>
<style>
.header, .para {
color: red;
}
</style>
</head>
<body>
<h3 class="header">How to apply styles to multiple classes at once?</h3>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>
示例 2
在这个例子中,我们将把字体颜色“绿色”和字体样式“斜体”应用于具有“header”和“para”类的 HTML 元素。我们将使用点(.) 选择器并将它们与逗号(,) 连接来实现这一点。
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to apply styles to multiple classes at once??</title>
<style>
.header, .para {
color: green;
font-style: italic;
}
</style>
</head>
<body>
<h3class="header">How to apply styles to multiple classes at once?</h3>
<p class="para">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</body>
</html>
结论
在本文中,我们学习了如何同时应用多个 CSS 类。我们首先使用 CSS 提供的点(.) 选择器一次选择多个类,然后在样式表中为它们分配所需的样式。
广告
数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP