Pemilih CSS Berguna Anda Mungkin Tidak Tahu

<p>

<p>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?

<p>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

<p>Berikut ialah beberapa pemilih yang biasa digunakan:

• Pemilih Elemen: Menyasarkan semua elemen jenis tertentu. Contohnya, untuk menggayakan semua <div> elemen:

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

• Pemilih kelas: Memilih elemen dengan kelas tertentu. Jika kita mempunyai kelas yang dipanggil "text-large":

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

• Pemilih ID: Menyasarkan elemen dengan ID tertentu. Untuk elemen dengan ID "header":

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

• Pemilih atribut: digunakan untuk elemen dengan nilai atribut tertentu. Contohnya, untuk menggayakan semua pautan luaran (menggunakan atribut "rel"):

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

Pemilih CSS yang jarang tetapi berguna

<h3>Pemilih kanak-kanak (>) <p>Ia mencari elemen anak langsung unsur tersebut. Untuk elemen induk dengan kelas "bekas":

<code>.container > p {
  margin-left: 10px;
}</code>

<h3>Pemilih keturunan ( ) <p>Ini akan memilih semua keturunan dalam elemen. Jika kita mempunyai div dengan ID "utama" dan mahu menggayakan semua <span> elemen di dalamnya:

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

<h3>Pemilih adik beradik bersebelahan ( ) <p>Memilih elemen yang serta-merta mengikuti elemen khusus lain. Contohnya, selepas elemen <h3>, jika terdapat elemen <p>:

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

<h3>Pemilih adik beradik sejagat (~) <p>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>

<h3>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>

<h3>Kelas pseudo negatif (:bukan()) <p>Ia memilih elemen yang tidak sepadan dengan pemilih tertentu. Contohnya, semua elemen kecuali elemen dengan kelas "tersembunyi":

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

<h3>Sasaran pseudo-class (:sasaran) <p>Apabila serpihan URL sepadan dengan ID elemen. Untuk bahagian URL dengan ID "hubungi":

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

<h3>Kelas pseudo bahasa (:lang()) <p>Cari elemen berdasarkan atribut bahasa. Untuk elemen dengan lang="en-US":

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

<h3>mempunyai kelas pseudo (:has()) Kelas pseudo <p>: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>

<h3>Pseudo-class pilihan (::selection) <p>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

<p>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.

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

Atas ialah kandungan terperinci Pemilih CSS Berguna Anda Mungkin Tidak Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!