English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-child(an+b) هذا الوسيط CSS يبدأ أولاً في العثور على جميع الإخوة للعنصر الحالي، ثم ي排序هم بناءً على الترتيب الابتدائي من 1، ويُختار النتيجة هي مجموعة العناصر التي يتم تطبيق تعبير (an+b) الموجود في قوس nth-child.
0n+3 أو ببساطة 3 يُناسب العنصر الثالث.
1n+0 أو ببساطة n يُناسب كل عنصر. (تنبيه للتوافق: في إصدارات متصفحات Android 4.3 وكلها، لا يكون n و 1n متوافقين. 1n و 1n+0 متوافقان، يمكنك اختيار أي منهما حسب الرغبة.)
2n+0 أو ببساطة 2n يُناسب العناصر التي تكون مواقعها 2، 4، 6، 8... (عندما يكون n = 0، 2n+0 = 0، لا يوجد عنصر الـ 0 لأن التسلسل يبدأ من 1). يمكنك استخدام الكلمة المفتاحية even لتبديل هذه العبارة.
2n+1 يُناسب العناصر التي تكون مواقعها 1، 3، 5، 7... يمكنك استخدام الكلمة المفتاحية odd لتبديل هذه العبارة.
3n+4 يُناسب العناصر التي تكون مواقعها 4، 7، 10، 13...
a و b يجب أن يكونا أرقامًا صحيحة، وأن يكون العنصر الفرعي الأول هو العنصر الأول في التسلسل. أي أن المضلع يشمل جميع العناصر التي تكون أرقامها في مجموعة {an + b; n = 0, 1, 2, ...}. يجب أيضًا الانتباه إلى أن an يجب أن يُكتب قبل b، ولا يمكن كتابته كـ b+an.
يحدد لون الخلفية للعنصر الفرعي الثاني في العنصر الأم من نوع p:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات(oldtoolbag.com)</title>
<style>
p:nth-child(2)
{
background:orange;
}
</style>
</head>
<body>
<h1>هذا هو العنوان</h1>
<p>هذه هي الفقرة الأولى.</p>
<p>هذه هي الفقرة الثانية.</p>
<p>هذه هي الفقرة الثالثة.</p>
<p>هذه هي الفقرة الرابعة.</p>
<p><b>ملاحظة:</b> لا يدعم متصفح Internet Explorer 8 وأحدث إصداراته اختيار النص النثري :nth-child().</p>
</body>
</html>اختبار لمعرفة ‹/›محدد :nth-child(n) يُناسب العنصر الذي هو العاشر في العنصر الأم، دون تحديد نوع العنصر.
n يمكن أن يكون عددًا، كلمة مفتاحية، أو معادلة.
إشارة: يرجى الرجوع إلىمصطنع، هذا المحدد يُناسب العنصر الذي هو العاشر في نفس النوع من الإخوة.
tr:nth-child(2n+1)
يعني الصفين المزدوجين في جدول HTML.
tr:nth-child(odd)
يعني الصفين المزدوجين في جدول HTML.
tr:nth-child(2n)
يعني الصفين المزدوجين في جدول HTML.
tr:nth-child(even)
يعني الصفين المزدوجين في جدول HTML.
span:nth-child(0n+1)
يعني العنصر الفرعي الأول ويُدعى span، يعمل بنفس الطريقة مثل المحدد :first-child.
span:nth-child(1)
يعني العنصر الأم الذي يحتوي على أول عنصر فرعي ويُدعى span يتم اختياره
span:nth-child(-n+3)
يُناسب الأولثة عناصر الفرعية من عناصر span.
الرقم في الجدول يمثل إصدار أول متصفح يدعم هذه الخاصية.
| مصطنع | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
يمكن استخدام العدد الزوجي والفرقي ككلمات مفتاحية لتنسيق العناصر الفرعية التي تكون أرقامها زوجية أو فرقية (الرقم الأول هو 1). في هذا المثال، قمنا بتحديد لون الخلفية للعناصر p التي تكون أرقامها زوجية وأخرى فرقية:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات(oldtoolbag.com)</title>
<style>
p:nth-child(odd)
{
background:#ff0000;
}
p:nth-child(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<h1>هذا هو العنوان</h1>
<p>هذه هي الفقرة الأولى.</p>
<p>هذه هي الفقرة الثانية.</p>
<p>هذه هي الفقرة الثالثة.</p>
<p>هذه هي الفقرة الرابعة.</p>
<p><b>ملاحظة:</b> لا يدعم متصفح Internet Explorer 8 وأحدث إصداراته اختيار النص النثري :nth-child().</p>
</body>
</html>اختبار لمعرفة ‹/›وصف استخدام الصيغة (an+ b): a يمثل حجم التكرار، N هو معادلة حسابية (تبدأ من 0)، وb هو قيمة الزيادة. في هذا المثال، قمنا بتحديد لون الخلفية للعناصر p التي تكون أرقامها مضاعفات 3:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات(oldtoolbag.com)</title>
<style>
p:nth-child(3n+0)
{
background:orange;
}
</style>
</head>
<body>
<h1>هذا هو العنوان</h1>
<p>الفقرة الأولى.</p>
<p>الفقرة الثانية.</p>
<p>الفقرة الثالثة.</p>
<p>الفقرة الرابعة.</p>
<p>الفقرة الخامسة.</p>
<p>الفقرة السادسة.</p>
<p>الفقرة السابعة.</p>
<p>الفقرة الثامنة.</p>
<p>الفقرة التاسعة.</p>
<p><b>ملاحظة:</b> لا يدعم متصفح Internet Explorer 8 وأحدث إصداراته اختيار النص النثري :nth-child().</p>
</body>
</html>اختبار لمعرفة ‹/›