Rumah >hujung hadapan web >tutorial css >Apakah pemilih yang biasa digunakan dalam CSS3?

Apakah pemilih yang biasa digunakan dalam CSS3?

WBOY
WBOYasal
2024-02-19 09:32:05500semak imbas

Apakah pemilih yang biasa digunakan dalam CSS3?

CSS3 mempunyai banyak pemilih untuk memilih dan meletakkan elemen HTML. Berikut akan memperkenalkan beberapa pemilih CSS3 yang biasa digunakan dan memberikan contoh kod yang sepadan.

  1. Pemilih Elemen:
    Pemilih elemen ialah pemilih yang paling asas dan biasa digunakan, digunakan untuk memilih elemen dalam dokumen HTML. Berikut ialah contoh kod menggunakan pemilih elemen:

    p {
      color: red;
    }

    Kod di atas memilih semua

    dan menetapkan warna teksnya kepada merah.

  2. Pemilih Kelas:
    Pemilih kelas digunakan untuk memilih elemen dengan nama kelas yang sama. Anda perlu menambah nama kelas yang sepadan pada atribut kelas elemen HTML dan mulakan dengan noktah "." Berikut ialah contoh kod menggunakan pemilih kelas:

    .highlight {
      background-color: yellow;
    }

    Kod di atas memilih semua elemen dengan nama kelas "serlah" dan menetapkan warna latar belakangnya kepada kuning.

  3. Pemilih ID:
    Pemilih ID digunakan untuk memilih elemen dengan id yang sama. Anda perlu menambah id yang sepadan dengan atribut id elemen HTML dan mulakan dengan tanda paun "#". Berikut ialah contoh kod menggunakan pemilih ID:

    #logo {
      width: 200px;
      height: 100px;
    }

    Kod di atas memilih elemen dengan id "logo" dan menetapkan lebarnya kepada 200px dan tinggi kepada 100px.

  4. Pemilih Atribut:
    Pemilih atribut digunakan untuk memilih elemen dengan atribut tertentu. Pemilihan boleh dibuat berdasarkan kehadiran, nilai, dsb. atribut. Berikut ialah contoh kod beberapa pemilih atribut biasa:

  5. Pemilih kelas pseudo:
    Pemilih kelas pseudo digunakan untuk memilih keadaan atau kedudukan tertentu elemen. Berikut ialah contoh kod beberapa pemilih kelas pseudo yang biasa digunakan:

    • Pilih elemen anak pertama:

      ul li:first-child {
      font-weight: bold;
      }

      Kod di atas bermaksud elemen anak

    • dan Fon mereka adalah tebal.
    • Pilih elemen alih tetikus:

      a:hover {
      text-decoration: underline;
      }

      Kod di atas memilih semua elemen alih tetikus dan menambah garis bawah di bawah teksnya.

Di atas ialah beberapa pemilih dan contoh kod yang biasa digunakan dalam CSS3. Memilih pemilih yang sesuai boleh memilih dan mengubah suai gaya elemen HTML dengan mudah, meningkatkan kesan dan fleksibiliti reka bentuk web.

Atas ialah kandungan terperinci Apakah pemilih yang biasa digunakan dalam CSS3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn