如何同时应用样式到多个类?
为了同时应用样式到多个类,我们将使用点(.) 选择器和逗号(,)。在本文中,我们将使用点(.) 选择器并使用选择器选择所有具有其类名的元素,并用逗号(,) 分隔。
“类”是一个 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 提供的点(.) 选择器一次选择多个类,然后在样式表中为它们分配所需的样式。
广告