Pemilih CSS Berguna Anda Mungkin Tidak Tahu

Pemilih CSS memainkan peranan penting dalam pembangunan web dan digunakan untuk penggayaan halaman web. Walaupun ramai orang biasa dengan pemilih biasa, terdapat beberapa pemilih yang kurang biasa tetapi sangat berguna.

Apakah pemilih CSS?

Pemilih CSS ialah corak yang digunakan untuk memilih elemen pada halaman web untuk penggayaan. Mereka boleh mencari elemen berdasarkan atribut, kelas, ID, dsb.

Pemilih CSS yang biasa digunakan

Berikut ialah beberapa pemilih yang biasa digunakan:

• Pemilih Elemen: Menyasarkan semua elemen jenis tertentu. Contohnya, untuk menggayakan semua <div> elemen: <pre class="brush:php;toolbar:false">&lt;code&gt;div { border: 1px solid black; }&lt;/code&gt;</pre> <ul> <li> <strong>Pemilih kelas</strong>: Memilih elemen dengan kelas tertentu. Jika kita mempunyai kelas yang dipanggil "text-large": </li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;.text-large { font-size: 20px; }&lt;/code&gt;</pre> <ul> <li> <strong>Pemilih ID</strong>: Menyasarkan elemen dengan ID tertentu. Untuk elemen dengan ID "header": </li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;#header { background-color: blue; }&lt;/code&gt;</pre> <ul> <li> <strong>Pemilih atribut</strong>: digunakan untuk elemen dengan nilai atribut tertentu. Contohnya, untuk menggayakan semua pautan luaran (menggunakan atribut "rel"): </li> </ul> <pre class="brush:php;toolbar:false">&lt;code&gt;a[rel=&quot;external&quot;] { color: red; }&lt;/code&gt;</pre> <h2 id="Pemilih-CSS-yang-jarang-tetapi-berguna">Pemilih CSS yang jarang tetapi berguna</h2> <h3 id="Pemilih-kanak-kanak-gt">Pemilih kanak-kanak (>)</h3> <p>Ia mencari elemen anak langsung unsur tersebut. Untuk elemen induk dengan kelas "bekas": </p> <pre class="brush:php;toolbar:false">&lt;code&gt;.container &gt; p { margin-left: 10px; }&lt;/code&gt;</pre> <h3 id="Pemilih-keturunan">Pemilih keturunan ( )</h3> <p>Ini akan memilih semua keturunan dalam elemen. Jika kita mempunyai div dengan ID "utama" dan mahu menggayakan semua <code><span></span> elemen di dalamnya:

  <code>#main span {
    color: green;
  }</code>

  Pemilih adik beradik bersebelahan ( )

  Memilih elemen yang serta-merta mengikuti elemen khusus lain. Contohnya, selepas elemen <h3></h3>, jika terdapat elemen <p></p>:

  <code>h3 + p {
    font-weight: bold;
  }</code>

  Pemilih adik beradik sejagat (~)

  Cari unsur adik-beradik unsur lain, tidak semestinya bersebelahan. Jika kita mempunyai div dengan "item" kelas dan mahu menggayakan semua elemen adik beradik berikutnya dengan "detail" kelas:

  <code>.item ~ .detail {
    padding-top: 5px;
  }</code>

  Pemilih atribut dengan padanan separa (^=, $=, *=)

  • Bermula dengan (^=): Untuk menetapkan gaya semua sumber imej bermula dengan "https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a":

  <code>img[src^="https://www.php.cn/link/e2e1cbe72ab1192e395c35295763982a"] {
    border-radius: 5px;
  }</code>

  • berakhir dengan ($=): Untuk semua borang yang kaedahnya berakhir dengan "post":

  <code>form[method$="post"] {
    background-color: #f0f0f0;
  }</code>

  • *mengandungi (=)**: Untuk menggayakan semua pautan yang mengandungi "produk" dalam atribut hrefnya:

  <code>a[href*="product"] {
    text-decoration: underline;
  }</code>

  Kelas pseudo negatif (:bukan())

  Ia memilih elemen yang tidak sepadan dengan pemilih tertentu. Contohnya, semua elemen kecuali elemen dengan kelas "tersembunyi":

  <code>:not(.hidden) {
    display: block;
  }</code>

  Sasaran pseudo-class (:sasaran)

  Apabila serpihan URL sepadan dengan ID elemen. Untuk bahagian URL dengan ID "hubungi":

  <code>div {
    border: 1px solid black;
  }</code>

  Kelas pseudo bahasa (:lang())

  Cari elemen berdasarkan atribut bahasa. Untuk elemen dengan lang="en-US":

  <code>.text-large {
    font-size: 20px;
  }</code>

  mempunyai kelas pseudo (:has())

  Kelas pseudo

  :has() digunakan untuk memilih elemen yang mengandungi unsur anak tertentu atau unsur turunan. Contohnya, untuk menggayakan div yang mengandungi imej:

  <code>#header {
    background-color: blue;
  }</code>

  Pseudo-class pilihan (::selection)

  Kelas pseudo ini membolehkan anda menggayakan bahagian teks yang dipilih oleh pengguna. Contohnya, apabila pengguna memilih beberapa teks dalam perenggan:

  <code>a[rel="external"] {
    color: red;
  }</code>

  Kesimpulan

  Pemilih CSS yang luar biasa ini menyediakan cara tambahan untuk meletakkan dan menggayakan elemen dengan tepat. Mereka meningkatkan fleksibiliti dan kefungsian kod CSS, menjadikannya lebih berkuasa dan cekap dalam mencipta halaman web yang menarik secara visual dan tersusun dengan baik.

  Untuk maklumat lanjut, sila lawati https://www.php.cn/link/8dacd3d8b9d2cd20eb244b5f745ea88e