帶邊框的最終兒童選擇器仍然帶下劃線

我有一個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

客戶的願望 –

帶邊框的最終兒童選擇器仍然帶下劃線

回答

相關問題