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

Apakah pemilih yang biasa digunakan dalam CSS3?

Feb 19, 2024 am 09:32 AM
pemilih css elemen html pemilih id pemilih atribut Pemilih kelas pseudo

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;
    }
    Salin selepas log masuk

    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;
    }
    Salin selepas log masuk

    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;
    }
    Salin selepas log masuk

    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:

    • Pilih elemen dengan atribut yang ditentukan:

      input[type="text"] {
      border: 1px solid black;
      }
      Salin selepas log masuk

      Kod di atas bermaksud memilih semua elemen dengan atribut jenis "teks" dan menukar sempadannya Tetapkan kepada 1px garis hitam pejal.

    • Pilih elemen yang bermula, berakhir atau mengandungi rentetan tertentu dengan nilai atribut yang ditentukan:

      a[href^="https"] {
      color: blue;
      }
      Salin selepas log masuk

      Kod di atas bermaksud memilih semua ​​elemen yang mempunyai nilai atribut href bermula dengan "https" dan tetapkan teksnya warna kepada biru.

  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:

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 Laman Web ini
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

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Cara membaca data excel dalam html Cara membaca data excel dalam html Mar 27, 2024 pm 05:11 PM

Cara membaca data excel dalam html: 1. Gunakan perpustakaan JavaScript untuk membaca data Excel 2. Gunakan bahasa pengaturcaraan bahagian pelayan untuk membaca data Excel;

Penjelasan terperinci kaedah rujukan jQuery: Panduan permulaan cepat Penjelasan terperinci kaedah rujukan jQuery: Panduan permulaan cepat Feb 27, 2024 pm 06:45 PM

Penjelasan terperinci kaedah rujukan jQuery: Panduan Mula Pantas jQuery ialah perpustakaan JavaScript yang popular yang digunakan secara meluas dalam pembangunan tapak web Ia memudahkan pengaturcaraan JavaScript dan menyediakan pemaju dengan fungsi dan ciri yang kaya. Artikel ini akan memperkenalkan kaedah rujukan jQuery secara terperinci dan menyediakan contoh kod khusus untuk membantu pembaca bermula dengan cepat. Memperkenalkan jQuery Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam fail HTML. Ia boleh diperkenalkan melalui pautan CDN atau dimuat turun

Jalankan fungsi PHP menggunakan onclick Jalankan fungsi PHP menggunakan onclick Feb 29, 2024 pm 04:31 PM

Kami juga akan merangkumi cara lain untuk melaksanakan fungsi PHP melalui acara onclick() menggunakan perpustakaan Jquery. Kaedah ini memanggil fungsi javascript, yang akan mengeluarkan kandungan fungsi php dalam halaman web. Kami juga akan menunjukkan cara lain untuk melaksanakan fungsi PHP menggunakan acara onclick(), memanggil fungsi PHP menggunakan JavaScript tulen. Artikel ini akan memperkenalkan cara untuk melaksanakan fungsi PHP, menggunakan kaedah GET untuk menghantar data dalam URL dan menggunakan fungsi isset() untuk menyemak data GET. Kaedah ini memanggil fungsi PHP jika data ditetapkan dan fungsi tersebut dilaksanakan. Menggunakan jQuery untuk melaksanakan fungsi PHP melalui acara onclick() yang boleh kita gunakan

Bagaimana untuk melaraskan tema WordPress untuk mengelakkan paparan tidak sejajar Bagaimana untuk melaraskan tema WordPress untuk mengelakkan paparan tidak sejajar Mar 05, 2024 pm 02:03 PM

Cara melaraskan tema WordPress untuk mengelakkan paparan tidak sejajar memerlukan contoh kod khusus Sebagai sistem CMS yang berkuasa, WordPress disukai oleh banyak pembangun laman web dan juruweb. Walau bagaimanapun, apabila menggunakan WordPress untuk mencipta laman web, anda sering menghadapi masalah salah jajaran tema, yang menjejaskan pengalaman pengguna dan keindahan halaman. Oleh itu, adalah sangat penting untuk melaraskan tema WordPress anda dengan betul untuk mengelakkan paparan tidak sejajar. Artikel ini akan memperkenalkan cara melaraskan tema melalui contoh kod tertentu.

Bagaimana untuk membuang titik di hadapan tag li dalam css Bagaimana untuk membuang titik di hadapan tag li dalam css Apr 28, 2024 pm 12:36 PM

Terdapat dua cara untuk mengalih keluar titik daripada teg li dalam CSS: 1. Gunakan "jenis gaya senarai: tiada;" Gunakan imej telus dan "imej gaya senarai: url("transparent.png"); ; "gaya. Kedua-dua kaedah boleh mengalih keluar titik semua tag li Jika anda hanya mahu mengalih keluar titik tag li tertentu, anda boleh menggunakan pemilih kelas pseudo.

Apakah pemisah talian dreamweaver? Apakah pemisah talian dreamweaver? Apr 08, 2024 pm 09:54 PM

Gunakan teg <br> dalam Dreamweaver untuk membuat pemisah baris, yang boleh dimasukkan melalui menu, kekunci pintasan atau menaip terus. Boleh digabungkan dengan gaya CSS untuk mencipta baris kosong ketinggian tertentu. Dalam sesetengah kes, adalah lebih sesuai untuk menggunakan teg <p> dan bukannya teg <br> kerana ia secara automatik mencipta baris kosong antara perenggan dan menggunakan kawalan gaya.

Gunakan CSS Transform untuk mengubah elemen Gunakan CSS Transform untuk mengubah elemen Feb 24, 2024 am 10:09 AM

Penggunaan Transform dalam CSS Sifat Transform CSS ialah alat yang sangat berkuasa yang boleh melakukan operasi seperti terjemahan, putaran, penskalaan dan menyengetkan elemen HTML. Ia boleh mengubah penampilan elemen secara mendadak dan menjadikan halaman web lebih kreatif dan dinamik. Dalam artikel ini, kami akan memperkenalkan pelbagai kegunaan Transform secara terperinci dan memberikan contoh kod khusus. 1. Terjemah (Terjemah) Terjemah merujuk kepada menggerakkan elemen pada jarak tertentu di sepanjang paksi-x dan paksi-y. Sintaksnya adalah seperti berikut: tran

Apakah maksud :: dalam css Apakah maksud :: dalam css Apr 28, 2024 pm 03:45 PM

Pemilih kelas pseudo :: dalam CSS digunakan untuk menentukan keadaan atau gelagat istimewa elemen, dan lebih khusus daripada pemilih kelas pseudo : dan boleh memilih sifat atau keadaan tertentu bagi elemen.

See all articles