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