Cara menggunakan kelas css dan pemilih id

Dalam CSS, pemilih kelas digunakan untuk memilih elemen dengan kelas tertentu (kelas), diwakili oleh noktah dan sintaksnya ialah ".kelas yang ditentukan {style attribute: style attribute value;}". Pemilih id digunakan untuk menentukan gaya khusus untuk elemen html yang ditandakan dengan id tertentu Ia ditakrifkan menggunakan "#" dan sintaksnya ialah "nilai id khusus {atribut khusus: nilai atribut khusus;}".

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3&&HTML5, komputer Dell G3.

Cara menggunakan kelas css dan pemilih id

Pemilih kelas

.jalur pemilihan pemilih kelas Terdapat elemen kelas yang ditentukan.

Dalam CSS, pemilih kelas ditunjukkan sebagai noktah:

.center {text-align: center}

Dalam contoh di atas, semua elemen HTML dengan kelas tengah dipusatkan.

Dalam kod HTML di bawah, kedua-dua elemen h1 dan p mempunyai kelas tengah. Ini bermakna kedua-duanya akan menghormati peraturan dalam pemilih ".center".

<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>

Nota: Nombor tidak boleh digunakan sebagai aksara pertama nama kelas! Ia tidak akan berfungsi dalam Mozilla atau Firefox.

Seperti id, kelas juga boleh digunakan sebagai pemilih terbitan:

.fancy td {
color: #f60;
background: #666;
}

Dalam contoh di atas, sel jadual di dalam elemen yang lebih besar dengan nama kelas mewah akan menjadi Teks Jingga pada latar belakang kelabu. (Elemen yang lebih besar bernama fancy mungkin jadual atau div)

elemen juga boleh dipilih berdasarkan kelasnya:

td.fancy {
color: #f60;
background: #666;
}

Dalam contoh di atas, kelas Sel jadual dinamakan fancy akan menjadi oren dengan latar belakang kelabu.

<td class="fancy">

Anda boleh menetapkan kelas mewah kepada mana-mana elemen jadual seberapa banyak yang anda mahu. Sel yang ditandai dengan fancy akan berwarna oren dengan latar belakang kelabu. Sel yang tidak diberikan kelas bernama fancy tidak terjejas oleh peraturan ini. Perlu diingatkan juga bahawa perenggan dengan kelas mewah tidak akan berwarna oren dengan latar belakang kelabu, dan sudah tentu mana-mana elemen lain yang ditandai sebagai mewah tidak akan terjejas oleh peraturan ini. Ini semua disebabkan oleh cara kami menulis peraturan ini, kesannya terhad kepada sel jadual yang ditandakan sebagai mewah (iaitu menggunakan elemen td untuk memilih kelas mewah).

pemilih id

pemilih id boleh menentukan gaya khusus untuk elemen HTML yang ditandakan dengan id tertentu.

Pemilih id ditakrifkan dengan "#".

Untuk dua pemilih id di bawah, yang pertama boleh mentakrifkan warna elemen sebagai merah, dan yang kedua boleh mentakrifkan warna elemen sebagai hijau:

#red {color:red;}
#green {color:green;}

Dalam kod HTML berikut, Elemen p dengan atribut id berwarna merah muncul dalam warna merah, dan elemen p dengan atribut id berwarna hijau muncul dalam warna hijau.

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>

Nota: Atribut id hanya boleh muncul sekali bagi setiap dokumen HTML. Untuk mengetahui sebabnya, lihat XHTML: Pemfaktoran Semula Laman Web.

pemilih id dan pemilih terbitan

Dalam reka letak moden, pemilih id sering digunakan untuk mencipta pemilih terbitan.

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}

Gaya di atas hanya akan digunakan pada perenggan yang muncul dalam elemen dengan id bar sisi. Elemen ini kemungkinan besar ialah sel div atau jadual, walaupun ia juga boleh menjadi jadual atau elemen peringkat blok lain. Ia juga boleh menjadi elemen sebaris, seperti atau , tetapi penggunaan sedemikian adalah menyalahi undang-undang kerana ia tidak boleh digunakan dalam elemen sebaris ;p> (jika anda terlupa sebabnya, lihat XHTML: Pemfaktoran Semula Laman Web).

Satu pemilih, berbilang kegunaan

Walaupun elemen yang ditandakan sebagai bar sisi hanya boleh muncul sekali dalam dokumen, pemilih id ini boleh digunakan berkali-kali sebagai pemilih terbitan:

#sidebar p {
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
#sidebar h2 {
font-size: 1em;
font-weight: normal;
font-style: italic;
margin: 0;
line-height: 1.5;
text-align: right;
}

Di sini, apa yang jelas berbeza daripada elemen p lain dalam halaman ialah elemen p di dalam bar sisi telah dirawat secara khusus Pada masa yang sama, apa yang jelas berbeza daripada semua elemen h2 lain dalam halaman ialah Elemen p dalam bar sisi Elemen h2 juga mendapat layanan istimewa yang berbeza.

Pemilih berasingan

Pemilih id boleh berfungsi secara bebas walaupun ia tidak digunakan untuk mencipta pemilih terbitan:

#sidebar {
border: 1px dotted #000;
padding: 10px;
}

Mengikut peraturan ini, Elemen dengan id bar sisi akan mempunyai sempadan bertitik hitam lebar piksel dan 10 piksel pelapik di sekelilingnya. Versi lama penyemak imbas Windows/IE mungkin mengabaikan peraturan ini melainkan anda mentakrifkan secara khusus elemen yang dimiliki oleh pemilih ini:

div#sidebar {
border: 1px dotted #000;
padding: 10px;
}

(Belajar perkongsian video: tutorial video css , tutorial video html)

Atas ialah kandungan terperinci Cara menggunakan kelas css dan pemilih id. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!