css - 带边框的末子选择器仍然带有下划线

Question

非常感谢您的帮助。

我在 asp.net 中遇到 html 标记问题，因此，必须制定解决方法。对于 Firefox 和 Opera，一切都很完美，但 Safari 上的 Chrome 仍然存在一个问题。

我想做最后<th>标签无边框。标题 <tr>行具有“边框”CSS 类。这是 css 部分:

.bordered th
{
    border: 1px solid black;
}

.bordered th:last-child
{
    border: 0px none white;
    border-bottom: 0px none white;    
}

HTML 标记:

`<table class="bordered" cellspacing="0" border="0" id="ctl00_body_gvTimeTable" style="border-collapse:collapse;">
    <tr style="border-width:0px;">
        <th scope="col">One</th>
        <th scope="col">Two</th>
        <th scope="col">Three</th>
        <th scope="col">&nbsp;</th>
    </tr>`

但还是最后<th>保持下划线。有什么问题？

Answer 1

我在 jsFiddle 中检查过这个.我在 Chrome(版本 15)和 Safari(版本 5)中都没有发现任何问题。

我对您的 CSS 做了轻微调整(将您的边框值更改为零 - 按照 Stack Overflow 的建议):

.bordered th { border: 1px solid black; }
.bordered th:last-child { border: 0; border-bottom: 0; }

需要注意的是，:last-child 是一个 CSS3 selector .这意味着它不会在 IE8 或更低版本中工作(除非您使用 Selectivizr 或类似的)。