Apakah pemilih css?

<p>Pemilih CSS merujuk kepada cara dalam helaian gaya CSS untuk menentukan elemen HTML untuk gaya digunakan. Pemilih adalah sangat penting kerana mereka menentukan elemen HTML yang mana gaya terikat melalui CSS. Pemilih CSS adalah pengetahuan asas yang mesti dipelajari dalam pengaturcaraan CSS. Pemilih yang betul boleh meningkatkan kebolehbacaan dan kebolehselenggaraan kod, dan juga membenarkan pembangun melaksanakan peraturan gaya mereka sendiri dengan lebih cepat. Dalam artikel ini, kami akan memperkenalkan beberapa jenis asas pemilih CSS.

Pemilih elemen

<p>Pemilih elemen ialah salah satu jenis pemilih paling asas dalam CSS. Ia boleh memilih elemen berdasarkan nama tag elemen HTML. Contohnya, jika kita ingin mentakrifkan warna fon sebagai merah untuk semua elemen <p>, kita boleh menggunakan kod berikut:

p {
  color: red;
}

<p>Dengan cara ini, semua teks perenggan akan menjadi merah.

Pemilih kelas

<p>Pemilih kelas ialah pengecam yang memilih elemen berdasarkan atribut kelas yang ditentukan oleh elemen. Dalam HTML, kita boleh menentukan satu atau lebih kelas untuk elemen, dengan setiap kelas dipisahkan oleh ruang. Kita boleh menggunakan pemilih kelas untuk menetapkan sifat CSS kepada kelas tertentu.

<p class="highlight">This text will be highlighted in some way.</p>

.highlight {
  background-color: yellow;
}

<p>Dalam contoh ini, kami menetapkan warna latar belakang semua elemen dengan kelas "serlah" kepada kuning.

Pemilih ID

<p>Sama seperti pemilih kelas, pemilih ID memilih pengecam elemen berdasarkan atribut ID yang ditentukan oleh elemen. ID mengenal pasti elemen secara unik, jadi setiap nilai ID adalah unik dalam setiap dokumen HTML. Kami boleh menggunakan pemilih ID ini untuk mengikat sifat CSS ke dalam elemen tertentu.

<p id="main-heading">This is the main heading of the page.</p>

#main-heading {
  font-size: 24px;
}

<p>Dalam contoh ini, kami menggunakan pemilih ID untuk menetapkan saiz fon semua elemen dengan ID "tajuk utama" kepada 24px.

Pemilih atribut

<p>Pemilih atribut memilih pengecam elemen berdasarkan atribut yang ditentukan oleh elemen. Kita boleh menggunakan pemilih atribut untuk menetapkan sifat CSS untuk semua elemen yang mempunyai atribut khusus. Pemilih atribut boleh menentukan lagi sama ada atribut itu sepadan dengan nilai tertentu

<input type="text" value="Input text here">
<input type="submit" value="Submit">

input[type="text"] {
  width: 200px;
}

input[type="submit"] {
  background-color: blue;
  color: white;
}

<p>Dalam contoh ini, kami menggunakan pemilih atribut untuk menetapkan atribut <input> dalam semua elemen type kepada Set. lebar elemen text kepada 200px, tetapkan warna latar belakang elemen dengan atribut type kepada submit kepada biru dan tetapkan warna fon kepada putih.

Pemilih kelas pseudo

<p>Pemilih kelas pseudo ialah pemilih yang memilih keadaan atau titik tertentu bagi elemen yang mungkin tidak boleh dipilih melalui atribut HTML standard atau jenis elemen. Dalam CSS, kami menggunakan titik bertindih (:) untuk mentakrifkan pemilih kelas pseudo.

<p>Berikut ialah beberapa pemilih kelas pseudo yang biasa digunakan:

<ul> <li> :hover: Keadaan apabila tetikus meluncur ke atas elemen <li> :active: tetikus mengklik pada elemen Status apabila <li> :visited: Status apabila pautan telah diakses <li> :focus: Status apabila elemen mendapat fokus tetikus <li> :nth-child(): Pilih elemen Elemen adik beradik <li> :last-child: Pilih elemen terakhir dalam elemen adik beradik

button:hover {
  background-color: red;
}

input:focus {
  outline: none;
}

ul li:nth-child(2) {
  color: blue;
}

div:last-child {
  font-size: 16px;
}

<p> Dalam contoh ini, kami menetapkan keadaan apabila tetikus slaid di atas elemen <button> Warna latar belakang ditetapkan. <input>Apabila elemen menerima fokus tetikus, sempadan akan dialih keluar. Kami menggunakan warna teks elemen <ul> kedua bagi setiap senarai <li> menjadi biru. Untuk elemen <div> terakhir, kami menetapkan saiz fonnya kepada 16px.

<p>Ringkasan

<p>Terdapat banyak jenis pemilih CSS, dan kami boleh menggunakan pemilih mengikut keperluan dan senario yang berbeza. Jika kami menguasai penggunaan pemilih ini, kami boleh meningkatkan kecekapan pengaturcaraan CSS kami dengan banyak, dan pada masa yang sama menjadikan kod kami lebih ringkas, mudah dibaca dan mudah diselenggara.

Atas ialah kandungan terperinci Apakah pemilih css?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!