Ketahui sintaks asas menggunakan pemilih CSS

Untuk menguasai sintaks pemilih CSS asas, contoh kod khusus diperlukan

Pemilih CSS ialah bahagian yang sangat penting dalam pembangunan bahagian hadapan Ia boleh digunakan untuk memilih dan mengubah suai pelbagai elemen dokumen HTML. Menguasai sintaks pemilih CSS asas adalah penting untuk menulis helaian gaya yang cekap. Artikel ini akan memperkenalkan beberapa pemilih CSS biasa dan contoh kod yang sepadan.

Pemilih elemen Pemilih elemen ialah pemilih paling asas, yang boleh memilih elemen yang sepadan melalui nama tegnya. Contohnya, untuk memilih semua perenggan (elemen p), anda boleh menggunakan kod berikut:

p { color: blue; } Pemilih Kelas Pemilih kelas membenarkan anda menambah satu atau lebih nama kelas pada elemen HTML dan memilih elemen yang sepadan mengikut nama kelas . Nama kelas bermula dengan . . Contohnya, tambahkan kelas bernama highlight pada teks: . 开头。例如，给文本添加一个名为 highlight 的类：

.highlight { background-color: yellow; } ID选择器 ID选择器允许给HTML元素添加一个唯一的ID，并通过ID来选择对应的元素。ID名以 # 开头。例如，给一个元素添加一个ID为 header ：

#header { font-size: 24px; } 后代选择器 后代选择器可以用来选择特定元素的后代元素。它使用空格将两个选择器连在一起。例如，选择所有 #container 下的 p 元素：

#container p { color: red; } 子元素选择器 子元素选择器可以选择特定元素的直接子元素。它使用 > 来将两个选择器连在一起。例如，选择所有 #navigation 下的直接子元素 li ：

#navigation > li { display: inline; } 伪类选择器 伪类选择器允许选择特定状态的元素，例如，悬停状态、访问状态等。伪类选择器以 : 开头。例如，选择悬停状态下的链接：

a:hover { text-decoration: underline; } 相邻兄弟选择器 相邻兄弟选择器可以选择紧接在另一个元素后的元素。它使用 + 来将两个选择器连在一起。例如，选择紧接在 h1 元素后的 p 元素：

h1 + p { font-weight: bold; } 属性选择器 属性选择器可以选择带有指定属性的元素，可以根据属性的值进行更精确的选择。属性选择器使用方括号 [] 来指定属性名和属性值。例如，选择所有带有 target=_blank a[target="_blank"] { color: pink; }

Pemilih ID Pemilih ID membolehkan anda menambah ID unik pada elemen HTML dan memilih elemen yang sepadan mengikut ID. Nama ID bermula dengan # . Contohnya, tambahkan elemen dengan ID pengepala:

rrreee🎜🎜🎜Pemilih Keturunan 🎜Pemilih keturunan boleh digunakan untuk memilih elemen turunan bagi elemen tertentu. Ia menggunakan ruang untuk menyambung dua pemilih bersama-sama. Contohnya, untuk memilih semua elemen p di bawah #container : 🎜rrreee🎜🎜🎜Pemilih elemen kanak-kanak 🎜Pemilih elemen kanak-kanak boleh memilih anak langsung bagi elemen tertentu. Ia menggunakan > untuk menyambungkan dua pemilih bersama-sama. Contohnya, untuk memilih semua elemen li yang merupakan anak langsung #navigation : 🎜rrreee🎜🎜🎜Pemilih kelas pseudo 🎜Pemilih kelas pseudo membenarkan pemilihan elemen dalam sesuatu tertentu keadaan, sebagai contoh, keadaan Tuding, keadaan akses, dsb. Pemilih kelas pseudo bermula dengan : . Contohnya, untuk memilih pautan pada tuding: 🎜rrreee🎜🎜🎜Pemilih Adik Beradik Bersebelahan🎜Pemilih Adik Bersebelahan memilih elemen serta-merta mengikut elemen lain. Ia menggunakan + untuk menyambungkan dua pemilih bersama-sama. Contohnya, pilih elemen p sejurus selepas elemen h1 : 🎜rrreee🎜🎜🎜Pemilih atribut 🎜Pemilih atribut boleh memilih elemen dengan atribut tertentu, mengikut nilai Harta untuk pemilihan yang lebih tepat. Pemilih atribut menggunakan kurungan segi empat sama [] untuk menentukan nama atribut dan nilai atribut. Contohnya, untuk memilih semua pautan dengan target=_blank : 🎜rrreee🎜🎜🎜Di atas adalah beberapa pemilih CSS yang biasa digunakan, tetapi ini hanyalah puncak gunung ais. Menguasai lebih banyak sintaks pemilih akan membantu kami mengendalikan elemen HTML dengan lebih baik dan menulis helaian gaya yang fleksibel dan boleh diselenggara. 🎜

Ketahui sintaks asas menggunakan pemilih CSS

Artikel berkaitan