Rumah > Artikel > hujung hadapan web > Bagaimana untuk memilih semua elemen kanak-kanak elemen (kecuali yang terakhir) menggunakan CSS?

Bagaimana untuk memilih semua elemen kanak-kanak elemen (kecuali yang terakhir) menggunakan CSS?

PHPzke hadapan: 2023-09-16 08:45:072100semak imbas

如何使用 CSS 选择元素的所有子元素（除了最后一个子元素）？

CSS ialah gaya halaman web yang biasa digunakan. Apabila membangunkan aplikasi web, kadangkala kita perlu menggunakan gaya yang berbeza pada elemen yang berbeza. Keperluan biasa ini ialah memilih semua elemen anak bagi sesuatu elemen kecuali yang terakhir! Gunakan CSS untuk memilih semua elemen anak bagi sesuatu elemen (kecuali elemen anak terakhir).

Dalam artikel ini, kita akan belajar cara memilih semua kecuali elemen anak terakhir dalam CSS menggunakan kaedah yang berbeza. Kami akan membincangkan setiap kaedah dan sintaksnya secara terperinci, bersama-sama dengan contoh untuk membantu anda memahami cara kaedah tersebut berfungsi.

Cara pertama untuk memilih semua elemen anak kecuali yang terakhir melibatkan penggunaan pemilih :not(), yang membolehkan anda memilih semua elemen yang tidak sepadan dengan pemilih tertentu. Kaedah kedua melibatkan penggunaan pemilih :nth-last-child(), yang memilih semua elemen yang merupakan anak ke-n daripada penghujung elemen induk. Dalam kaedah ini, kami menentukan parameter n+2 yang membantu memilih semua elemen anak unsur (kecuali elemen anak terakhir dalam HTML).

Kedua-dua kaedah ini sangat berguna apabila membangunkan aplikasi web dan ia boleh membantu dalam melaksanakan UI yang diperlukan untuk halaman web. Menggunakan pemilih yang dibincangkan di atas membantu kami memahami cara pemilih ini berfungsi dan kami boleh mencipta gaya tersuai untuk fungsi dan UI untuk halaman web kami.

Kaedah 1: Gunakan :bukan pemilih

- Pemilih bukan ialah pemilih CSS berkuasa yang membolehkan anda memilih semua elemen kecuali yang sepadan dengan keadaan tertentu. Untuk memilih semua elemen anak kecuali yang terakhir, kita boleh menggunakan :not selector dengan :last-child selector.

Untuk memilih semua anak unsur (kecuali anak terakhir) menggunakan pemilih - not(), kami menggunakannya dengan pemilih :last-child. :pemilih anak terakhir membantu memilih elemen anak terakhir bagi sesuatu elemen. Dengan menggunakan gabungan pendekatan ini dengan dua pemilih, kita boleh memilih semua elemen anak bagi sesuatu elemen kecuali yang terakhir.

Berikut ialah sintaks cara menggunakan pemilih :not() untuk memilih semua elemen anak elemen induk (kecuali elemen anak terakhir) -

tatabahasa

Dalam sintaks di bawah, .parent ialah pemilih untuk elemen induk, > memilih semua anak terdekatnya, * memilih semua elemen anak dan :not(:last-child) mengecualikan elemen anak terakhir daripada pemilihan.

.parent > *:not(:last-child) {
  /* styles for all children except the last one */
}

Contoh

Dalam contoh ini, pemilih CSS .parent > *:not(:last-child) memilih semua anak langsung bagi elemen kelas .parent (iaitu h1, h2, p dan elemen span), kecuali Elemen anak terakhir , iaitu elemen . Menggunakan CSS, kami menggunakan sifat "warna" pada tiga elemen anak pertama bagi elemen .induk (iaitu elemen h1, h2 dan p), manakala elemen anak keempat (iaitu elemen ) tidak terjejas. 跨度>跨度>

Sekarang mari kita lihat cara menggunakan kod CSS pada kod halaman HTML -

<!DOCTYPE html>
<html >
   <head>
      <style>
         .parent > *:not(:last-child) {
            color: green;
         }
      </style>
   </head>
   <body>
      <div class="parent">
         <h1>First Child</h1>
         <h2>Second Child</h2>
         <p>Third Child</p>
         <span>Fourth Child</span>
      </div>
   </body>
</html>

Kaedah 2: Gunakan:nth-last-child() selector

- Pemilih nth-last-child() ialah satu lagi alat berguna dalam CSS yang membolehkan anda memilih elemen berdasarkan kedudukannya dalam senarai anak elemen. Kita boleh menggunakan ini untuk memilih semua kecuali anak terakhir dengan menggunakan :nth-last-child(n+2) untuk memilih semua kecuali anak terakhir.

Untuk menggunakan pemilih :nth-last-child() untuk memilih semua elemen anak kecuali elemen anak terakhir, kita boleh menentukan parameter n+2. Parameter yang ditakrifkan menggunakan CSS untuk memilih semua elemen HTML kecuali elemen anak terakhir, iaitu elemen anak terakhir.

Berikut ialah sintaks cara menggunakan pemilih :nth-last-child() untuk memilih semua elemen anak elemen induk (kecuali elemen anak terakhir) -

tatabahasa

Dalam sintaks berikut, .parent ialah pemilih elemen induk, > memilih semua elemen anak langsungnya, * memilih semua elemen anak, :nth-last-child(n+2) memilih kecuali yang terakhir Semua elemen kanak-kanak daripada .

.parent > *:nth-last-child(n+2) {
   /* styles for all children except the last one */
}

Contoh

Dalam contoh ini, pemilih CSS .parent > *:nth-last-child(n+2) memilih semua anak langsung elemen kelas .parent, kecuali anak terakhir. Di sini, semua elemen butang dalam elemen .parent akan dipilih, tetapi elemen butang terakhir tidak akan dipilih.

Berbilang sifat CSS telah digunakan pada tiga butang pertama, tetapi gaya CSS tidak ditambahkan pada butang anak terakhir.

Sekarang mari lihat cara menggunakan kod CSS pada kod halaman HTML -

<!DOCTYPE html>
<html >
   <head>
      <style>
         .parent > *:nth-last-child(n+2) {
            background-color: green;
            padding: 10px;
            color: white;
            border-radius: 10px;
            width: 10em;
            text-decoration: none;
            font-family: sans-serif;
            border: none;
         }
      </style>
   </head>
   <body>
      <div class="parent">
      <button>First</button>
      <button>Second</button>
      <button>Third</button>
      <button>Fourth</button>
   </div>
   </body>
</html>

结论

在本文中，我们了解了如何使用不同的方法选择元素的所有子元素（除了最后一个子元素）。在 CSS 选择器的帮助下，选择子项是一个轻松的过程，因为它提供了多个可用于执行此任务的选择器，例如 :not() 选择器和 :nth-last-child() 选择器。上面讨论的两个示例都展示了 CSS 在将不同样式应用于元素的所有子元素（最后一个元素除外）方面的作用。这两个选择器都可以帮助我们轻松地将不同的 CSS 样式应用于不同的 HTML 元素，不仅如此，它还有助于轻松创建动态网站。

Atas ialah kandungan terperinci Bagaimana untuk memilih semua elemen kanak-kanak elemen (kecuali yang terakhir) menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css html 选择器 ui

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menukar warna butang radio menggunakan CSS?Artikel seterusnya：Bagaimana untuk menukar warna butang radio menggunakan CSS?

Artikel berkaitan

Lihat lagi