Ketahui pemilih kod CSS asas: mulakan dari awal dan biasakan diri dengan klasifikasi dan aplikasi pemilih

<p>

<p>Mula Pantas dengan Pemilih Asas dalam Kod CSS: Ketahui Klasifikasi dan Aplikasi Pemilih daripada Scratch

<p>CSS (Cascading Style Sheets) ialah bahasa penanda yang digunakan untuk mengawal gaya dokumen HTML. Dalam CSS, pemilih digunakan untuk memilih elemen HTML yang mana gaya harus digunakan. Ringkasnya, pemilih digunakan untuk menentukan elemen HTML yang akan dipengaruhi oleh gaya CSS.

<p>Terdapat banyak jenis pemilih, dan anda boleh memilih pemilih yang sesuai mengikut keperluan dan senario aplikasi anda. Artikel ini akan memperkenalkan klasifikasi asas dan aplikasi pemilih CSS dari awal untuk membantu pembaca mula dengan cepat menggunakan kod CSS.

1. Pemilih elemen

<p>Pemilih elemen ialah pemilih paling mudah dan paling asas, yang memilih elemen yang sepadan melalui nama teg elemen HTML. Contohnya, untuk memilih semua elemen perenggan, anda boleh menggunakan pemilih berikut:

p {
    color: red;
}

<p>p dalam kod di atas ialah pemilih elemen, yang memilih semua <p></ code> tag elemen dan tetapkan warna teksnya kepada merah. <code>p 就是一个元素选择器，它选择了所有 <p> 标签的元素，并把它们的文本颜色设为红色。

2. 类选择器

<p>类选择器是通过在HTML元素的class属性中指定一个名称来选择元素。这种选择器使得我们可以选择具有相同类名的元素，并对它们应用相同的样式。例如，要选择所有具有类名为 highlight 的元素，可以使用如下的选择器：

.highlight {
    background-color: yellow;
}

<p>上述代码中的 .highlight 就是一个类选择器，它选择了所有具有 highlight 类名的元素，并将它们的背景色设置为黄色。

3. ID选择器

<p>ID选择器是通过在HTML元素的id属性中指定一个唯一的名称来选择元素。与类选择器不同，ID选择器只能选择一个元素，因为ID属性的值在一个HTML文档中必须是唯一的。例如，要选择ID为 header 的元素，可以使用如下的选择器：

#header {
    font-size: 24px;
}

<p>上述代码中的 #header 就是一个ID选择器，它选择了ID为 header 的元素，并将它们的字体大小设置为24像素。

4. 后代选择器

<p>后代选择器是通过选择HTML元素的后代元素来选择元素。后代元素是指被选元素的子元素、孙元素、曾孙元素等。例如，要选择所有 <div> 元素下的 <p> 元素，可以使用如下的选择器：

div p {
    font-weight: bold;
}

<p>上述代码中的 div p 就是一个后代选择器，它选择了所有 <div> 元素下的 <p> 元素，并将它们的字体设置为粗体。

5. 直接子元素选择器

<p>直接子元素选择器是通过选择HTML元素的直接子元素来选择元素。直接子元素是指被选元素的直接子元素，而非其后代元素。例如，要选择所有 <div> 元素的直接子元素 <p>，可以使用如下的选择器：

div > p {
    color: blue;
}

<p>上述代码中的 div > p 就是一个直接子元素选择器，它选择了所有 <div> 元素的直接子元素 <p>

Pemilih kelas<p>
<p>Pemilih kelas memilih elemen dengan menyatakan nama dalam atribut class bagi elemen HTML. Pemilih ini membolehkan kami memilih elemen dengan nama kelas yang sama dan menggunakan gaya yang sama padanya. Contohnya, untuk memilih semua elemen dengan nama kelas highlight, anda boleh menggunakan pemilih berikut:
rrreee🎜.highlight dalam kod di atas ialah pemilih kelas, yang Semua elemen dengan nama kelas highlight dipilih dan warna latar belakangnya ditetapkan kepada kuning. 🎜
🎜Pemilih ID 🎜🎜🎜Pemilih ID memilih elemen dengan menyatakan nama unik dalam atribut id elemen HTML. Tidak seperti pemilih kelas, pemilih ID hanya boleh memilih satu elemen kerana nilai atribut ID mestilah unik dalam dokumen HTML. Contohnya, untuk memilih elemen dengan ID header, anda boleh menggunakan pemilih berikut: 🎜rrreee🎜#header dalam kod di atas ialah pemilih ID, yang memilih ID untuk elemen header dan tetapkan saiz fonnya kepada 24 piksel. 🎜
🎜Pemilih keturunan🎜🎜🎜Pemilih keturunan memilih elemen dengan memilih elemen turunan unsur HTML. Unsur keturunan merujuk kepada unsur anak, unsur cucu, unsur cicit, dsb. unsur yang dipilih. Contohnya, untuk memilih elemen <p>
di bawah semua elemen <div>, anda boleh menggunakan pemilih berikut: 🎜rrreee🎜div dalam kod di atas p ialah pemilih keturunan yang memilih semua elemen <div> di bawah elemen <p>
dan menetapkan fonnya kepada badan tebal. 🎜
🎜Pemilih elemen anak langsung 🎜🎜🎜Pemilih elemen anak langsung memilih elemen dengan memilih elemen anak langsung unsur HTML. Unsur anak langsung merujuk kepada unsur anak langsung bagi unsur yang dipilih, bukan unsur keturunannya. Contohnya, untuk memilih semua elemen <div> yang merupakan elemen anak langsung <p>
, anda boleh menggunakan pemilih berikut: 🎜rrreee🎜 dalam div kod > p ialah pemilih elemen anak langsung, yang memilih semua elemen anak langsung <p>
semua elemen <div> dan Warna teks mereka ditetapkan kepada biru. 🎜🎜Selain lima pemilih asas di atas, terdapat juga lebih banyak jenis pemilih seperti pemilih kelas pseudo, pemilih atribut dan lain-lain yang boleh digunakan untuk memilih elemen. Memahami dan menguasai klasifikasi dan aplikasi pemilih ini boleh membantu kami mengawal gaya elemen HTML dengan lebih baik. 🎜🎜Ringkasnya, dengan mempelajari dan menggunakan pemilih CSS, kami boleh mengawal dan mengurus gaya elemen HTML secara fleksibel untuk mencapai pelbagai reka letak dan reka bentuk halaman web. Saya harap artikel ini dapat membantu pembaca mula menggunakan kod CSS dengan cepat dan meningkatkan keupayaan reka bentuk dan pembangunan web mereka. 🎜