Yanıtlar:
Modern tarayıcılar td:nth-child(2)için ikinci tdve td:nth-child(3)üçüncü tarayıcılar için kullanın . Bunların td her satır için ikinci ve üçüncü olduğunu unutmayın .
Sürüm 9'dan daha eski IE ile uyumluluk istiyorsanız, Tim'in önerdiği gibi kardeş birleştiricileri veya JavaScript kullanın . Yönteminin açıklaması ve açıklaması için bu ilgili soruya verdiğim yanıta da bakın .
td:nth-of-type(3)olarak daha iyidir. önceki iki kardeşinin öğe türlerine bakılmaksızın , üst td:nth-child(3)öğesinin hem a td hem de üçüncü alt öğesi olan bir öğeyle eşleşir . üçte alacak , ne olursa olsun birçok olmayan nasıl unsurları ondan önce vardır . İstediğiniz öğeden önce öğe olmayan öğeler varsa, her iki seçici de aynı şeyle eşleşir. td:nth-of-type(3)tdtdtd
IE 7 ve 8 (ve IE6 içermeyen CSS3 desteği olmayan diğer tarayıcılar) için 2. ve 3. çocukları almak için aşağıdakileri kullanabilirsiniz:
2. Çocuk:
td:first-child + td3. Çocuk:
td:first-child + td + tdArdından + td, seçmek istediğiniz her ek çocuk için başka bir tane ekleyin .
IE6'yı desteklemek istiyorsanız bu da yapılabilir! Sadece küçük bir javascript kullanmalısınız (bu örnekte jQuery):
$(function() {
$('td:first-child').addClass("firstChild");
$(".table-class tr").each(function() {
$(this).find('td:eq(1)').addClass("secondChild");
$(this).find('td:eq(2)').addClass("thirdChild");
});
});Daha sonra css'nizde istediğiniz değişiklikleri yapmak için bu sınıf seçicileri kullanmanız yeterlidir:
table td.firstChild { /*stuff here*/ }
table td.secondChild { /*stuff to apply to second td in each row*/ }