Bagaimana untuk menggunakan gaya CSS pada elemen berbeza dengan nama kelas yang sama dalam HTML?-tutorial css-php.cn

Bagaimana untuk menggunakan gaya CSS pada elemen berbeza dengan nama kelas yang sama dalam HTML?

WBOY

Lepaskan： 2023-09-13 15:45:07

ke hadapan

1009 orang telah melayarinya

Bagaimana untuk menggunakan gaya CSS pada elemen berbeza dengan nama kelas yang sama dalam HTML?

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!