我试图在表格行中的特定单元格上放置一个顶部边框。我正在使用以下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 非常适合第三个和第五个 child ,但出于某种我不知道的原因,当我为第一个 child 添加边框时,它跨越了整个表格行。这只发生在 chrome 浏览器中。
我错过了什么?我已经尝试了所有我能想到的配置。
您可以在我的网站上实时查看这种陌生感:
http://www.yandasmusic.com/Guitars-s/1820.htm
最佳答案
这是因为您要定位的表包含在另一个表中,具有相同的类名:
<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
这是包装第二个嵌套表,给它顶部边框。
关于选择表格单元格上的css边框,:nth-child,:chrome中的第n个类型选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27450468/