带边框的最终儿童选择器仍然带下划线

我有一个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>下划线。有什么问题？

来源

2011-11-27 Johnny_D

我没有在最新版本的Chrome和Safari OSX中观察到这个问题。 – bookcasey

对不起，我不能显示整个项目，只有一个屏幕http://i27.fastpic.ru/big/2011/1127/ca/97d55867500ba95d28865b641e4f6bca.png –

或者这里是例子http://codepaste.ru/8500/ 。问题是我无法修改HTML标记，它是asp.net。 –

我在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或类似的）。

来源

2011-11-27 19:48:48 w0lf42

它只出现在下一行是完全跨越的，即使行没有边界。 –

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

来源

2011-11-27 18:23:37 motoxer4533

它仍然受到CSS的影响，但我认为它是Chrome的bug，它仍然是底线。 –

尝试投掷它!important这将覆盖任何以前给定的样式，以及稍后将覆盖它的样式。

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

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

来源

2011-11-27 18:50:32 Ole

好主意，但没有为我工作=（ –

这是什么意思？ – BoltClock

客户的愿望 –

带边框的最终儿童选择器仍然带下划线

回答

相关问题