CSS3 محدد العثور على 2 شعبة من نفس الفئة

Question

أحتاج محدد CSS التي يمكن العثور على 2 شعبة 2 بنفس الدرجة.لقد بحثت في nth-child() ولكن هذا ليس ما أريد لأنني لا أرى وسيلة لزيادة توضيح فئة ما أريد.هذه 2 divs سوف يكون الأشقاء في الوثيقة إذا كان ذلك يساعد.

بلدي HTML تبدو شيئا مثل هذا:

<div class="foo">...</div>
<div class="bar">...</div>
<div class="baz">...</div>
<div class="bar">...</div>

وأريد 2 شعبة.شريط (أو آخر div.شريط سيعمل أيضا).

Answer 1

<القوي> UPDATE : في كتب هذا الجواب أصلا في عام 2008 عندما كان الدعم nth-of-type لا يمكن الاعتماد عليها في أحسن الأحوال. اليوم وانا اقول لك يمكن بأمان استخدام شيء من هذا القبيل .bar:nth-of-type(2)، إلا إذا كان لديك لدعم IE8 وكبار السن.

---

الجواب الأصل من 2008 التالي (لاحظ أن لا أنصح بذلك بعد الآن!) :

إذا يمكنك استخدام نموذج JS الذي يمكن استخدام هذا الرمز لتعيين بعض القيم والأسلوب، أو إضافة اسم_الفئة آخر :

// set style:
$$('div.theclassname')[1].setStyle({ backgroundColor: '#900', fontSize: '1.2em' });
// OR add class name:
$$('div.theclassname')[1].addClassName('secondclass'); // pun intentded...

و(لم أكن اختبار هذا الرمز، وأنها لا معرفة ما اذا كان هناك فعلا هو شعبة الثاني الحالي، ولكن شيئا من هذا القبيل يجب أن تعمل).

ولكن إذا كنت توليد جانب الخادم أتش تي أم أل قد فقط كذلك إضافة فئة إضافية على البند الثاني ...

Answer 2

والمختارون يمكن الجمع:

.bar:nth-child(2)

وتعني "الشيء الذي لديه الدرجة <م> شريط " الذي هو أيضا الطفل 2ND.

Answer 3

بلدي الأصلي الإجابة فيما يتعلق :nth-of-type هو ببساطة خطأ.بفضل بول عن الإشارة إلى هذا.

كلمة "نوع" لا يشير فقط إلى "نوع العنصر" (مثل div).اتضح أن محددات div.bar:nth-of-type(2) و div:nth-of-type(2).bar يعني نفس الشيء.سواء حدد العناصر التي [أ] هي الثانية div من الأم ، [b] لديك الدرجة bar.

لذلك فقط CSS نقية الحل اليسرى التي أنا على علم, إذا كنت تريد تحديد جميع عناصر معين محدد باستثناء الأول هو الأخوة محدد العامة:

.bar ~ .bar

http://www.w3schools.com/cssref/sel_gen_sibling.asp

---

بلدي الأصلي (خطأ) الإجابة على النحو التالي:

مع وصول CSS3, هناك خيار آخر.قد لا يكون متوفرا عند السؤال كان أول طلب:

.bar:nth-of-type(2)

http://www.w3schools.com/cssref/sel_nth-of-type.asp

هذا يختار العنصر الثاني الذي يرضي .bar محدد.

إذا كنت تريد الثاني والأخير من نوع معين من العنصر (أو كل منهم ما عدا الأولى), الأخوة محدد العامة أيضا تعمل بشكل جيد:

.bar ~ .bar

http://www.w3schools.com/cssref/sel_gen_sibling.asp

إنها أقصر.ولكن بالطبع نحن لا ترغب في تكرار الكود صحيح ؟ :-)

Answer 4

ما هو بالضبط بنية HTML ؟

السابقة CSS لن تنجح إذا HTML هو على هذا النحو:

CSS

.foo:nth-child(2)

HTML

<div>
 <div class="foo"></div>
 <div class="foo">Find me</div>
...
</div>

ولكن إذا كان لديك HTML التالية سوف لا تعمل.

<div>
 <div class="other"></div>
 <div class="foo"></div>
 <div class="foo">Find me</div>
 ...
</div>

وضعت بسيط, لا يوجد محدد من أجل الحصول على المؤشر من المباريات من بقية محدد قبل ذلك.

Answer 5

HTML

<h1> Target Bar Elements </h1>

<div class="foo">Foo Element</div>
<div class="bar">Bar Element</div>
<div class="baz">Baz Element</div>
<div class="bar">Bar Second Element</div>
<div class="jar">Jar Element</div>
<div class="kar">Kar Element</div>
<div class="bar">Bar Third Element</div>

CSS

.bar {background:red;}
.bar~.bar {background:green;}
.bar~.bar~.bar {background:yellow;}

DEMO https://jsfiddle.net/ssuryar/6ka13xve/

Answer 6

وبالنسبة للأشخاص الذين يبحثون عن إجابة مسج متوافقة:

$('.foo:eq(1)').css('color', 'red');

وHTML:

<div>
  <div class="other"></div>
  <div class="foo"></div>
  <div class="foo">Find me</div>
  ...    

Answer 7

هل هناك سبب أنه لا يمكنك القيام بذلك عن طريق جافا سكريبت؟ ستكون نصيحتي لاستهداف محددات مع قاعدة العالمي (.foo) ثم تحليل إلى أكثر للحصول على فو الماضي مع جافا سكريبت وتعيين أي التصميم الإضافية التي ستحتاج إليها.

وأو على النحو الذي اقترحه شتاين، فقط إضافة فئتين إذا استطعت:

<div class="foo"></div>
<div class="foo last"></div>

.foo {}
.foo.last {}

Answer 8

.parent_class div:first-child + div

وأنا مجرد استخدام أعلاه للعثور على div الثانية عن طريق تسلسل الطفل الأول مع منتخب +.