如何同時應用樣式到多個類?
為了同時應用樣式到多個類,我們將使用點(.) 選擇器和逗號(,)。在本文中,我們將使用點(.) 選擇器並使用選擇器選擇所有具有其類名的元素,並用逗號(,) 分隔。
“類”是一個 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