Rumah > hujung hadapan web > tutorial css > Bagaimana untuk mengubah suai gaya elemen ke-n dalam css

Bagaimana untuk mengubah suai gaya elemen ke-n dalam css

WBOY
Lepaskan: 2021-11-23 11:39:35
asal
4215 orang telah melayarinya

Dalam CSS, anda boleh menggunakan pemilih ":nth-child" untuk memilih elemen ke-n dan mengubah suai gaya elemen ini boleh memadankan elemen anak ke-n yang dimiliki oleh elemen induknya, tanpa mengira elemen. Jenis, sintaksnya ialah ":nth-child(n){ubah suai kandungan;}".

Bagaimana untuk mengubah suai gaya elemen ke-n dalam css

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

Cara mengubah suai gaya elemen ke-n dalam css

Dalam css anda boleh menggunakan: nth-child(n) pemilih yang sepadan dengan itu kepunyaan induknya Anak ke-N bagi elemen, tanpa mengira jenis elemen. Kemudian ubah suainya, n boleh menjadi nombor, kata kunci atau formula.

Contohnya adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(2)
{
background:#ff0000;
}
</style>
</head>
<body>
<h1>这是标题</h1>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p><b>注释:</b>Internet Explorer 不支持 :nth-child() 选择器。</p>
</body>
</html>
Salin selepas log masuk

Hasil keluaran:

Bagaimana untuk mengubah suai gaya elemen ke-n dalam css

Contoh di atas adalah untuk mengubah suai yang kedua elemen Mari kita lihat warna latar belakang:

Buka editor kami. Buat satu set urutan sebagai contoh. anak pertama ialah elemen pertama. anak terakhir ialah elemen terakhir. nth-child(3) ialah elemen ketiga. Nombor genap juga boleh ditentukan dengan bijak.

Bagaimana untuk mengubah suai gaya elemen ke-n dalam css

Bagaimana untuk mengubah suai gaya elemen ke-n dalam css

Tutorial video berkaitan yang disyorkan: tutorial video jQuery

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai gaya elemen ke-n dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
css
sumber:php.cn
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan