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

:last-child将选择目标父级的最后一个子元素（在本例中为.bordered th）。您需要使用类似th:last-of-type的内容。

Answer 2

尝试将其抛出!important，这将覆盖之前给定的任何样式，以及稍后会覆盖它的样式。

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

.bordered th:last-child
{
    border: 0 !important;
    border-bottom: 0 !important;
}

Answer 3

我在jsFiddle中查看了这个内容。我无法在Chrome（第15版）和Safari（第5版）中看到任何问题。

我对你的CSS稍作调整（将边框值更改为零 - 正如Stack Overflow所建议的那样）：

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

需要注意的一点是：最后一个孩子是CSS3 selector。这意味着它将无法在IE8或更低版本中运行（除非您使用Selectivizr或类似）。

带边框的最后一个子选择器仍然带有下划线

3 个答案: