选择表格单元格上的css边框：nth-​​child，：chrome中的nth-of-type选择器

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，为它提供顶部边框。