English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:nth-last-of-type(an+b) هذا الصيغة المزيفة CSS تطابق العناصر التي تحتوي على an+b-1 من نفس النوع من الإخوة بعد ذلك، حيث يكون n قيمة إيجابية أو صفر.
يملأ لون الخلفية للعنصر span الأخير الثاني:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات(oldtoolbag.com)</title>
<style>
span:nth-last-of-type(2) {
background-color: lime;
}
</style>
</head>
<body>
<div>
<span>هذا هو نطاق.</span>
<span>هذا هو نطاق آخر.</span>
<em>تأكيد.</em>
<span>واو، أصبح هذا النطاق غير واضح!</span>
<strike>هذا تم حذفه.</strike>
<span>هذا هو آخر نطاق.</span>
</div>
</body>
</html>الاختبار لرؤية ‹/›:nth-last-of-type( <nth> ) حيث <nth> = <an-plus-b> | even | odd
:nth-last-of-type(n) المسجل يطابق العنصر الأخير من نفس النوع من نفس المستوى.
n يمكن أن يكون عددًا أو كلمة مفتاحية أو معادلة.
إشارة:يرجى الرجوع إلى::nth-last-child()المسجل. المسجل يطابق العنصر الآبوي الذي يحتوي على العنصر الهيكلي الأخير من نفس النوع
الرقم في الجدول يمثل إصدار أول متصفح يدعم الخاصية.
| المحول | |||||
|---|---|---|---|---|---|
| :nth-last-of-type() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
العدد الزوجي والعدد الظاهر يمكن استخدامهما ككلمات مفتاحية لتنسيق العناصر الفرعية التي يقع فيها معديرها زوجي أو فردي.
في هذا المثال، قمنا بتعيين لون خلفية مختلف لكل عنصر p الذي يقع في الموضع الذي هو زوجي أو فردي بالتراجع:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>دليل الأساسيات(oldtoolbag.com)</title>
<style>
p:nth-last-of-type(odd)
{
background:#ff0000;
}
p:nth-last-of-type(even)
{
background:#0000ff;
}
</style>
</head>
<body>
<div>
<p>هذا هو الفقرة الأولى.</p>
<p>هذا هو الفقرة الثانية.</p>
<p>هذا هو الفقرة الثالثة.</p>
<p>هذا هو الفقرة الرابعة.</p>
</div>
</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-last-of-type(3n+0)
{
background:#ff0000;
}
</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-last-child().</p>
</body>
</html>الاختبار لرؤية ‹/›