Berbagi teknologi

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Bahasa Inggris Pemilih gaya, digunakan untuk memilih elemen html di halaman untuk menambahkan gaya CSS.

Urutkan berdasarkan performa rendering dari tinggi ke rendah Diikuti oleh:

PENGENAL Pemilih #id

Pilih elemen berdasarkan atribut idnya, peka huruf besar-kecil

<p id="p1" >第一段</p>
1

#p1{
  color: red;
}
1
2
3

Namun penggunaannya tidak dianjurkan karena:

• Pemilih id memiliki prioritas lebih tinggi dan tidak nyaman untuk mengatur ulang gaya.
• Pemilih id terutama digunakan oleh JS

pemilih kelas .class

Melalui atribut kelas elemengayaNama kelas elemen yang dipilih peka huruf besar-kecil

Pemilih CSS yang paling direkomendasikan adalah pemilih kelas memiliki semantik yang kuat dan gaya yang mudah diatur ulang.

<span class="important" >重点词汇</span>
1

.important{
  color: red;
  font-weight: bold;
}
1
2
3
4

Beberapa kelas gaya dapat ditambahkan ke elemen yang sama, dipisahkan oleh spasi.

<span class="important big" >巨大的重点词汇</span>
1

.important {
  color: red;
  font-weight: bold;
}
.big {
  font-size: 60px;
}
1
2
3
4
5
6
7

pemilih tag 标签名

Pilih elemen berdasarkan nama tagnya, tidak peka huruf besar-kecil

<a href="https://www.baidu.com/" target="_blank" >百度</a>
1

a {
  text-decoration: none; /* 无文本装饰（消除默认的下划线） */
}
1
2
3

Tidak disarankan karena kinerja pemilih tag yang buruk dan biaya pemeliharaan yang tinggi

pemilih karakter pengganti *

Pilih semua elemen html di halaman kecuali elemen semu. Ini sering digunakan untuk menghapus gaya default browser, namun tidak disarankan karena menghabiskan kinerja.

/* 清除所有html标签默认的外边距和内边距 */
* {
  margin: 0;
  padding: 0;
}
1
2
3
4
5

pemilih atribut [属性]

Pilih elemen berdasarkan atribut dan nilai atributnya. Atribut tidak peka huruf besar-kecil, dan nilai atribut peka huruf besar-kecil.

Pemilih kelas semu :状态名

Pilih elemen berdasarkan statusnya yang berbeda

同一个标签，不同的状态，有不同的样式，就叫做“伪类”
1

Gunakan penyeleksi kelas semu dalam daftar

n berarti 0,1,2,3,4,5,6,7,8...(Tidak valid jika n kurang dari 1, karena n = 0 tidak akan dipilih)

Gunakan penyeleksi kelas semu dalam tabel

• tr:nth-child(odd)：Cocok dengan baris 1, 3, dan 5 tabel, yang setara dengantr:nth-child(2n+1)。
• tr:nth-child(even): Cocok dengan baris 2, 4, dan 6 pada tabel, yang setara dengantr:nth-child(2n)。

• Contoh praktis pemilih kelas semu

  • Gunakan:nth-child() untuk menerapkan garis zebra, perataan tepi, penyorotan daftar rentang tertentu, dan tata letak adaptif daftar dinamis
    https://blog.csdn.net/weixin_41192489/artikel/detail/122089484

  • CSS mengimplementasikan tampilan dan penyembunyian dinamis (penggunaan yang luar biasa dari :checked dan :target)
    https://blog.csdn.net/weixin_41192489/artikel/detail/126267866

  • Gunakan: targetkan untuk memperluas lebih banyak, menciutkan, dan beralih tabhttps://blog.csdn.net/weixin_41192489/artikel/detail/121969768

  • Gunakan:placeholder-ditampilkan untuk mencapai interaksi gaya MaterialDesign
    https://blog.csdn.net/weixin_41192489/artikel/detail/121976627

  • Gunakan:placeholder-shown untuk memverifikasi nilai null dan perintah tidak boleh kosong.
    https://blog.csdn.net/weixin_41192489/artikel/detail/121977510

  • :checked mengimplementasikan ekspansi dan keruntuhan
    https://demo.cssworld.cn/selector/9/2-1.php

  • :dicentang mengimplementasikan peralihan tab
    https://demo.cssworld.cn/selector/9/2-2.php

  • :checked mengimplementasikan tombol radio khusus, kotak centang, sakelar, pemeriksaan label, dan pemilihan radio material
    https://blog.csdn.net/weixin_41192489/artikel/detail/122050069

  • Gunakan :valid dan :invalid untuk mengimplementasikan validasi formulir asli
    https://blog.csdn.net/weixin_41192489/artikel/detail/122070084

  • Gunakan :wajib dan :opsional untuk mengimplementasikan teks perintah verifikasi formulir
    https://blog.csdn.net/weixin_41192489/artikel/detail/122072879

  • :fokus-dalam mengimplementasikan daftar drop-down
    https://blog.csdn.net/weixin_41192489/artikel/detail/121959850

  • Saat kotak masukan terfokus, sorot label di depan (lihat metode 5 di tautan)
    https://blog.csdn.net/weixin_41192489/artikel/detail/121784196

  • Arahkan mouse untuk menampilkan gambar yang diperbesar vs klik mouse untuk menampilkan gambar yang diperbesar
    https://blog.csdn.net/weixin_41192489/artikel/detail/121944791

  • :empty menyembunyikan elemen kosong dan tips cerdas bidang yang hilang
    https://blog.csdn.net/weixin_41192489/artikel/detail/122086159

  • :only-child mengimplementasikan animasi pemuatan dinamis multi-status
    https://blog.csdn.net/weixin_41192489/artikel/detail/122088416

  • :layar penuh memungkinkan tampilan layar penuh dari gambar yang diklik
    https://blog.csdn.net/weixin_41192489/artikel/detail/122328725

  Pemilih elemen semu ::

  Digunakan untuk memilih dan memberi gaya pada bagian suatu elemen, bukan keseluruhan elemen

  CSS2中伪元素采用单冒号前缀语法， CSS2.1中伪元素改用双冒号前缀，所有支持双冒号的浏览器同样也支持旧的单冒号语法。考虑浏览器兼容性的话，推荐使用旧的单冒号语法，否则建议使用新的双冒号前缀
  1

  ::before Dan::after

  Ini perlu digunakan bersama dengan atribut konten untuk mengatur konten sebelum dan sesudah elemen
  https://blog.csdn.net/weixin_41192489/artikel/detail/115100040

  Contoh praktis yang umum digunakan:

  • Tambahkan ikon sebelum dan sesudah elemen (keajaiban ::sebelum dan ::setelah)
    https://blog.csdn.net/weixin_41192489/artikel/detail/134858462
  • CSS dengan cerdik menggunakan ::after dan ::before untuk mengimplementasikan navigasi kategori vertikal
    https://blog.csdn.net/weixin_41192489/artikel/detail/134885007
  • css dengan cerdik menggunakan ::after untuk mencapai animasi peralihan tab
    https://blog.csdn.net/weixin_41192489/artikel/detail/134881852

  ::first-letter Inisial

  <p>很久很久以前</p>
  <p>Long long ago</p>
  1
  2

  p::first-letter {
    font-size: 2em;
    color: red;
  }
  1
  2
  3
  4

  

  ::first-line baris pertama

    <div style="width: 120px">
      <p>很久很久以前，有一个白发苍苍的老人</p>
    </div>
  1
  2
  3

  p::first-line {
    color: red;
  }
  1
  2
  3

  

  ::selection Tarik mouse untuk memilih area

  <p>很久很久以前，有一个白发苍苍的老人</p>
  1

  p::selection {
    color: red;
    background-color: yellow;
  }
  1
  2
  3
  4

  

  ::placeholder pengganti teks

  <input placeholder="请输入" />
  1

  /* input 不写，则会选中页面所有元素的占位符 */
  input::placeholder {
    color: red;
  }
  1
  2
  3
  4

  

  Pemilih hubungan

  Pilih elemen berdasarkan hubungan antar elemen

  pemilih keturunan >

  Tag tingkat pertama yang dibungkus dalam sebuah tag adalah turunannya

  <div>
      <p>我是div的儿子</p>
  </div>
  1
  2
  3

  div>p{
    color:red;
  }
  1
  2
  3

  pemilih keturunan 空格

  Semua tag dalam sebuah tag adalah turunannya

    <div class="parent">
      <p class="red">我是子代（属于后代）</p>
      <p>我是子代（属于后代，但没有 .red）</p>
      <div>
        <div class="red">我是孙代（也属于后代）</div>
      </div>
    </div>
  1
  2
  3
  4
  5
  6
  7

  /* 所有属于.parent元素内部的.red元素都将被染成红色。*/
  .parent .red {
    color: red;
  }
  1
  2
  3
  4

  

  pemilih saudara ~

  Di bawah elemen induk yang sama, pilih elemen yang ditentukansetelahSemua elemen pada level yang sama, jadi sebenarnya, harus disebut demikian 后面兄弟选择器

  <div>
    <button>按钮1(不会变红)</button>
    <p>段落</p>
    <button>按钮2（会变红）</button>
  </div>
  1
  2
  3
  4
  5

  p ~ button {
    color: red;
  }
  1
  2
  3

  

  CSS tidak 前面兄弟选择器 , Anda dapat merujuk ke tautan di bawah untuk mensimulasikan penerapannya
  https://blog.csdn.net/weixin_41192489/artikel/detail/121784196

  pemilih saudara tetangga +

  Memilih elemen berikutnya segera setelah elemen

    <div class="parent">
      <p>段落</p>
      <button>按钮1</button>
      <button>按钮2</button>
    </div>
  1
  2
  3
  4
  5

  p + button {
    color: red;
  }
  1
  2
  3

  

  Pemilih persimpangan

  Pilih elemen pada halaman yang cocok dengan beberapa penyeleksi secara bersamaan

  • Tidak ada spasi di antara pemilih (spasi adalah pemilih turunan)
  • Jika ada pemilih tag, pemilih tag harus ditempatkan terlebih dahulu

      <p class="red">很久很久以前1</p>
      <p>很久很久以前2</p>
  1
  2

  /* 选中 p 标签中class值含 red 的元素 */
  p.red {
    color: red;
  }
  1
  2
  3
  4

  

  Pemilih serikat pekerja ,

  Di antara beberapa penyeleksi, selama salah satu dari mereka puas, maka akan dipilih.

  • Digunakan di antara beberapa penyeleksi , memisahkan

   <p class="error">报错信息</p>
   <p class="important">重要信息</p>
   <p>其他信息</p>
  1
  2
  3

  .error,
  .important {
    color: red;
  }
  1
  2
  3
  4