Bagaimanakah `html`, `body` dan Pemilih Universal Berbeza dalam Menggayakan Elemen HTML?

Memeriksa Perbezaan dalam Menggayakan Elemen HTML dengan html, badan dan Pemilih Universal

Memeriksa pemilih CSS, seseorang mungkin menghadapi percanggahan dalam tingkah laku mereka apabila digunakan pada dokumen HTML yang sama. Untuk meneroka perbezaan ini, mari kita periksa senario berikut:

1. html Pemilih:

html {
  color: black;
  background-color: white;
}

Pemilih ini menetapkan gaya untuk elemen html paling luar. Mewarisi sifat warnanya, semua keturunannya mewarisi teks hitam, termasuk elemen badan. Walau bagaimanapun, sifat warna latar belakang tidak diwarisi, jadi latar belakang telus lalai unsur badan kekal kelihatan melainkan ditetapkan sebaliknya secara eksplisit. Terutamanya, warna latar belakang elemen html memenuhi port pandang walaupun ia tidak memanjangkan ketinggian penuhnya.

2. Pemilih badan:

body {
  color: black;
  background-color: white;
}

Menggunakan gaya pada elemen badan secara langsung mempengaruhi semua keturunannya. Seperti sebelum ini, semua elemen mewarisi sifat warna. Selain itu, warna latar belakang elemen badan disebarkan kepada elemen html sehingga latar belakang ditentukan untuk html. Akibatnya, sama ada peraturan pertama atau kedua digunakan untuk penggayaan latar belakang membuat sedikit perbezaan praktikal dalam kebanyakan kes.

3. Pemilih Universal (*):

* {
  color: black;
  background-color: white;
}

Pemilih universal mempengaruhi setiap elemen, memutuskan rantaian warisan untuk kedua-dua warna dan warna latar belakang. Peraturan ini boleh ditindih oleh pemilih yang lebih khusus. Walaupun penggunaannya boleh bernilai untuk senario tertentu, pemecahan warisan melalui pemilih universal biasanya tidak digalakkan melainkan sangat diperlukan.

Atas ialah kandungan terperinci Bagaimanakah `html`, `body` dan Pemilih Universal Berbeza dalam Menggayakan Elemen HTML?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!