css border на ячейках select table с: nth-child,: nth-of-type selector в chrome

Question

Я пытаюсь разместить верхнюю границу для определенных ячеек в строке таблицы. Я делаю это с помощью следующей CSS:

table.v65-productDisplay > tbody > tr:nth-child(5n+1) > td:nth-of-type(1), 
table.v65-productDisplay > tbody > tr:nth-child(5n+1) > td:nth-of-type(3), 
table.v65-productDisplay > tbody > tr:nth-child(5n+1) > td:nth-of-type(5) 
{border-top:1px solid #d6d5d5; } 

Этот CSS работает отлично подходит для 3-го и 5-го ребенка, но по какой-то причине, без ведома мне, когда я добавляю границу первого ребенка, она охватывает по всей строка таблицы. Это происходит только в браузере Chrome.

Что мне не хватает? Я пробовал каждую конфигурацию, о которой я могу думать.

Вы можете просмотреть эту странность жить на моем сайте: http://www.yandasmusic.com/Guitars-s/1820.htm

Answer 1

Это потому, что стол вы ориентируетесь содержится внутри другой таблицы, с тем же именем класса:

<table width="100%" border="0" cellspacing="10" cellpadding="10" class="v65-productDisplay"> 
    <tbody> 
     <tr> 
      <td> <!-- this td is also targeted --> 
       <table width="100%" border="0" cellspacing="0" cellpadding="0" class="v65-productDisplay"> 
        <tbody> 
         <tr> 
          <!-- ... --> 

Таким образом, этот правило:

table.v65-productDisplay > tbody > tr:nth-child(5n+1) > td:nth-of-type(1) 

ли согласования td, который оберточной второй вложенной таблицы, придавая ему верхняя граница.