Laksanakan pelbagai senario aplikasi CSS :sasaran pemilih kelas pseudo

Untuk melaksanakan pelbagai senario aplikasi CSS :pemilih kelas pseudo sasaran, contoh kod khusus diperlukan

CSS :pemilih kelas pseudo sasaran ialah pemilih CSS yang biasa digunakan, yang boleh berdasarkan titik anchor (# dalam URL) ) untuk memilih elemen tertentu. Dalam artikel ini, kami akan memperkenalkan beberapa senario aplikasi praktikal menggunakan pemilih kelas pseudo ini dan memberikan contoh kod yang sepadan.

1. Penukaran gaya pautan navigasi dalam halaman:

Apabila pengguna mengklik pautan navigasi dalam halaman, anda boleh menggunakan pemilih kelas pseudo :target untuk menambah gaya pada pautan navigasi yang sedang diklik untuk menyerlahkan lokasi pengguna . Berikut ialah contoh kod:

HTML:

<ul class="navigation">
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div id="section1">Section 1 Content</div>
<div id="section2">Section 2 Content</div>
<div id="section3">Section 3 Content</div>

CSS:

.navigation a:target {
  font-weight: bold;
  color: red;
}

2. Kesan modal:

Kesan modal mudah boleh dicapai dengan menggunakan pemilih kelas pseudo :target dan kesan peralihan CSS3. Berikut ialah contoh kod:

HTML:

<div class="modal" id="modal">
  <div class="modal-content">
    <h2>Title</h2>
    <p>Modal Content</p>
    <a href="#!" class="close-button">Close</a>
  </div>
</div>
<a href="#modal">Open Modal</a>

CSS:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

.modal:target {
  display: block;
}

.modal-content {
  background-color: white;
  width: 300px;
  padding: 20px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.close-button {
  text-align: center;
  display: block;
  margin-top: 20px;
}

3. Tatal halaman ke bahagian yang ditentukan

Menggunakan pemilih kelas pseudo sasaran dan kesan animasi tatal, anda boleh mencapai penatalan yang lancar halaman apabila mengklik pautan navigasi Tentukan bahagian. Berikut ialah kod sampel:

HTML:

<ul class="navigation">
  <li><a href="#section1">Section 1</a></li>
  <li><a href="#section2">Section 2</a></li>
  <li><a href="#section3">Section 3</a></li>
</ul>

<div id="section1">Section 1 Content</div>
<div id="section2">Section 2 Content</div>
<div id="section3">Section 3 Content</div>

CSS:

html,body {
  scroll-behavior: smooth;
}

#section1:target,
#section2:target,
#section3:target {
  padding-top: 100px; /* 调整目标节的位置，以免内容被导航遮挡 */
}

Dengan menggunakan pemilih kelas pseudo sasaran, kami boleh mencapai pelbagai kesan praktikal, seperti penukaran gaya pautan navigasi, kesan kotak modal, lancar menatal, dll. Senario ini hanyalah sebahagian daripada banyak aplikasi Anda boleh mengembangkannya mengikut keperluan sebenar anda dan menggunakannya dengan lebih kreatif. Saya harap artikel ini akan membantu anda untuk belajar dan berlatih!

Atas ialah kandungan terperinci Laksanakan pelbagai senario aplikasi CSS :sasaran pemilih kelas pseudo. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!