CSS :nth-of-type() 伪类

定义和用法

CSS :nth-of-type(n) المثال المزيف يُستخدم لاختيار العنصر الذي هو فردي من الأبناء في العنصر الأم من نفس النوع (اسم العنصر). n العنصر الذي هو فردي من الأبناء.

n يمكن أن يكون عددًا/مؤشرًا، كلمة مفتاحية (فردي أو زوجي) أو معادلة (مثل an + b)،

نصيحة:رؤية :nth-child() المثال المزيف يُستخدم لاختيار العنصر الذي هو فردي من الأبناء في العنصر الأم. n العنصر الذي هو فردي من الأبناء، بغض النظر عن نوعه.

مثال

مثال 1

كيفية الاستخدام :nth-of-type() المسؤول:

/* يختار العنصر الثاني في مجموعة الأشقاء div */
div:nth-of-type(2) {
  background: red;
}
/* يختار العنصر الثاني في القائمة */
li:nth-of-type(2) {
  background: lightgreen;
}
/* يختار كل عنصر ثالث في مجموعة الأشقاء */
:nth-of-type(3) {
  background: yellow;
}

جرب بنفسك

مثال 2

فردي و زوجي هو كلمة مفتاحية يمكن استخدامها للتنسيق مع عنصر فردي أو زوجي (يبدأ عدد العناصر الأولية من 1).

في هذا المكان، نحدد لون الخلفية لكل عنصر <p> الذي هو فردي أو زوجي.

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

جرب بنفسك

مثال 3

استخدم المعادلة (an + b)،a يُمثل عدد فردي، n هو جميع الأرقام غير السلبية التي تبدأ من 0،b هو عدد فردي.

في هذا المكان، نحدد لون الخلفية لكل عنصر <p> الذي هو مضاعف لعدد 3 (سيتم اختيار الثالثة، السادسة، التاسعة، إلخ):

p:nth-of-type(3n+0) {
  background: red;
}

جرب بنفسك

مثال 4

في هذا المكان، نحدد لون الخلفية لكل عنصر <p> الذي هو مضاعف لعدد 3. ثم نطرح 1 (سيتم اختيار الثانية، الخامسة، الثامنة، إلخ):

p:nth-of-type(3n-1) {
  background: red;
}

جرب بنفسك

قواعد CSS

:nth-of-type(الـ index | فردي | زوجي | an+b) {
  بيانات css;
}

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يشير إلى إصدار المتصفح الأول الذي يدعم هذا المثال المزيف.