Cara menggunakan:nth-child(-n+5) pseudo-class pemilih untuk memilih gaya CSS elemen anak yang kedudukannya kurang daripada atau sama dengan 5

Cara menggunakan:nth-child(-n+5) pseudo-class selector untuk memilih gaya CSS elemen anak dengan kedudukan kurang daripada atau sama dengan 5# 🎜🎜##🎜🎜 #Dalam CSS, pemilih kelas pseudo ialah alat berkuasa yang boleh memilih elemen tertentu dalam dokumen HTML melalui kaedah pemilihan tertentu. Antaranya, :nth-child() ialah pemilih kelas pseudo yang biasa digunakan yang boleh memilih elemen anak pada kedudukan tertentu.

:nth-child(n) boleh memadankan elemen anak ke-nth dalam HTML, dan :nth-child(-n) boleh memadankan elemen anak ke-n terakhir dalam HTML. Menggabungkan kedua-duanya, kita boleh menggunakan :nth-child(-n+5) untuk memilih elemen anak dengan kedudukan kurang daripada atau sama dengan 5.

Contoh kod khusus adalah seperti berikut:

kod HTML:

<ul>
  <li>列表项1</li>
  <li>列表项2</li>
  <li>列表项3</li>
  <li>列表项4</li>
  <li>列表项5</li>
  <li>列表项6</li>
  <li>列表项7</li>
  <li>列表项8</li>
  <li>列表项9</li>
  <li>列表项10</li>
</ul>

Kod CSS:

rreee#🎜🎜🎜 kod di atas , kami memilih elemen anak li yang kedudukannya kurang daripada atau sama dengan 5 dalam elemen ul dan menetapkan warna teksnya kepada merah.

Jalankan kod di atas, anda akan mendapati bahawa warna teks item senarai 1 hingga 5 ditetapkan kepada merah, manakala warna teks item senarai 6 hingga 10 kekal lalai.

ul元素中位置小于等于5的li子元素，并将其文本颜色设置为红色。

运行以上代码，结果会发现列表项1到列表项5的文本颜色被设置为红色，而列表项6到列表项10的文本颜色保持默认。

需要注意的是，:nth-child()选择器是基于子元素的位置进行选择的。如果在ul元素中存在其他类型的子元素，如div、span等，并不会对它们起作用，只会选择li元素。所以在使用该选择器时要注意HTML结构的层次关系。

除了文本颜色，:nth-child(-n+5)选择器也可以用于设置其他样式，比如背景色、字体大小等。只需要将color: redPerlu diambil perhatian bahawa pemilih :nth-child() memilih berdasarkan kedudukan elemen anak. Jika terdapat jenis sub-elemen lain dalam elemen ul, seperti div, span, dsb., ia tidak akan berfungsi pada mereka dan hanya akan memilih elemen li. Oleh itu, apabila menggunakan pemilih ini, anda harus memberi perhatian kepada hubungan hierarki struktur HTML.

Selain warna teks, pemilih :nth-child(-n+5) juga boleh digunakan untuk menetapkan gaya lain, seperti warna latar belakang, saiz fon, dll. Hanya gantikan warna: merah dengan tetapan gaya yang sepadan.

#🎜🎜#Ringkasnya, dengan menggunakan pemilih kelas pseudo :nth-child(-n+5), kita hanya boleh memilih elemen anak dengan kedudukan kurang daripada atau sama dengan 5 dan menggunakan gaya CSS tertentu padanya , dengan itu Mencapai reka bentuk web yang lebih fleksibel. #🎜🎜#

Atas ialah kandungan terperinci Cara menggunakan:nth-child(-n+5) pseudo-class pemilih untuk memilih gaya CSS elemen anak yang kedudukannya kurang daripada atau sama dengan 5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!