Bagaimanakah Saya Boleh Menggayakan Elemen Pertama dan Terakhir Dalam Kelas CSS Secara Berbeza?

Memahami Pelaksanaan Kelas CSS pada Elemen

Dalam HTML, berbilang kelas boleh digunakan pada satu elemen menggunakan atribut kelas. Setiap kelas boleh mentakrifkan gaya yang berbeza.

Menggunakan Gaya Berbeza pada Elemen

Dalam senario yang diberikan, tugasnya adalah untuk menggunakan gaya tertentu pada elemen pertama dan terakhir dalam .social div.

1. Elemen Pertama (Tiada Atas Padding):

   • Gunakan kelas pertama untuk menyasarkan elemen pertama di dalam .sosial.
   • Tentukan sifat padding-top sebagai 0 dalam peraturan CSS .social.first .

2. Elemen Terakhir (Tiada Bawah Sempadan):

   • Gunakan kelas terakhir untuk menyasarkan elemen terakhir di dalam .sosial.
   • Tentukan sifat sempadan bawah sebagai tiada dalam peraturan CSS .social.last .

HTML Kod:

<div class="social first">
  ...
</div>

Kod CSS:

.social {
  width: 330px;
  height: 75px;
  float: right;
  text-align: left;
  padding: 10px 0;
  border-bottom: dotted 1px #6d6d6d;
}

.social.first {
  padding-top: 0;
}

.social.last {
  border-bottom: none;
}

Dalam CSS di atas, kelas .social mentakrifkan gaya lalai untuk semua elemen di dalamnya. Kelas .social.first dan .social.last mengatasi gaya ini untuk elemen pertama dan terakhir, masing-masing.

Dengan menggunakan pendekatan ini, anda boleh menggunakan gaya berbeza pada elemen tertentu dalam elemen induk, memastikan lebih banyak kawalan berbutir ke atas reka letak dan penampilan halaman web anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Elemen Pertama dan Terakhir Dalam Kelas CSS Secara Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!