使用 :nth-child, 选择表格单元格的 css 边框:chrome 中的第 n 个类型选择器

标签 css

我试图在表格行中的特定单元格上放置上边框。我正在使用以下 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,给它上边框。

关于使用 :nth-child, 选择表格单元格的 css 边框:chrome 中的第 n 个类型选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27450468/

相关文章:

html - CKEditor 从表中删除类属性

jquery - 添加:after element on "select" options

javascript - 使用 Bootstrap 3 和 AngularJS 的多选下拉列表?

javascript - 在固定位置的容器上平滑滚动

html - 是什么使这个 DIV 高度如此之大?

javascript - 输入字段仅针对第一个输入字段进行验证,无法删除输入字段

HTML 太阳系问题

html - 简单的 CSS 技巧 - 这可能吗?

javascript - :after selector not working if jquery inserts . 在链接中处于事件状态

javascript - 使用输入创建标签