Rumah > Artikel > hujung hadapan web > Bagaimana untuk menggunakan gaya CSS pada elemen berbeza dengan nama kelas yang sama dalam HTML?
Bagaimana untuk menggunakan gaya CSS pada elemen berbeza dengan nama kelas yang sama dalam HTML?
- WBOYke hadapan
- 2023-09-13 15:45:07942semak imbas
Kelas HTML ialah atribut global yang digunakan oleh teg HTML untuk menentukan senarai kelas yang bersifat sensitif huruf besar-besaran. Kelas-kelas ini kemudiannya digunakan oleh CSS untuk menggunakan gaya pada teg tertentu dengan kelas itu, dan oleh Javascript untuk memanipulasi gelagat, interaktiviti atau penggayaan elemen HTML.
Kaedah 1; Gunakan pemilih titik (.)
Dalam kaedah ini, kami hanya akan menggunakan pemilih titik (.) untuk memilih berbilang elemen dengan nama kelas yang sama dan menggunakan set gaya yang sama kepada mereka menggunakan CSS.
Contoh
Dalam contoh ini, kami akan memilih teg "p" dan teg HTML "span" menggunakan kelas mereka dan memberikan mereka warna teks "merah" menggunakan CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to apply CSS style to the different elements having the same class name in HTML?</title>
<style>
.sample {
color: red;
}
</style>
</head>
<body>
<p class="sample">This is p tag content!</p>
<span class="sample">This is span tag content!</span>
</body>
</html>
Kaedah 2: Gunakan teg “p” dan teg HTML “span”
Dalam kaedah ini, kami akan menggunakan CSS untuk menggunakan set gaya berbeza pada elemen dengan nama kelas yang sama. Untuk melakukan ini, kami akan menggunakan nama teg HTML diikuti dengan pemilih titik (.) untuk memilih elemen tertentu dan memberikannya gaya CSS yang diperlukan.
Contoh
Dalam contoh ini, kami akan memilih teg "p" dan teg HTML "span" menggunakan kelas mereka dan memberi mereka warna teks yang berbeza menggunakan CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<title>How to apply CSS style to the different elements having the same class name in HTML?</title>
<style>
p.sample {
color: red;
}
span.sample {
color: green;
}
</style>
</head>
<body>
<p class="sample">This is p tag content!</p>
<span class="sample">This is span tag content!</span>
</body>
</html>
Kesimpulan
Dalam artikel ini, kami mempelajari cara memilih elemen HTML daripada nama kelas dan cara menggunakan gaya CSS yang sama dan berbeza padanya menggunakan dua kaedah berbeza. Dalam kaedah pertama, kami menggunakan pemilih titik (.) untuk memilih berbilang elemen dengan nama kelas yang sama dan menggunakan gaya yang sama padanya. Dalam kaedah kedua, kami menggunakan gaya CSS yang berbeza pada elemen dengan nama kelas yang sama menggunakan nama tag HTML diikuti dengan pemilih titik (.).
Atas ialah kandungan terperinci Bagaimana untuk menggunakan gaya CSS pada elemen berbeza dengan nama kelas yang sama dalam HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!