使用css選擇器選擇沒有表格標題的表格行

使用css選擇器我該如何編寫一個選擇器，以便只有具有數據顯示光標的表格行作爲指針。我嘗試了下面但不是使用css選擇器選擇沒有表格標題的表格行

table tbody tr:not(tr>th)

是這個跨瀏覽器和IE6的事件？

這不是一個有效的CSS選擇器;你不能把組合器放在:not()裏面。

最好的辦法是把標題行（包含<th>元素即<tr>元素）一個<thead>內，離開行的其餘部分在表的<tbody>，並簡單地使用：

table tbody tr { 
    cursor: pointer; 
}

如果您不能修改你的HTML，單獨使用CSS選擇器是不可能的，特別是不需要支持IE6。改爲使用JavaScript;這裏是一個強制性的jQuery的例子：

$('table tbody tr:not(:has(th))').css('cursor', 'pointer');

2012-03-01 07:16:26 BoltClock

我m *確實*有一種方法可以用CSS3做到這一點雖然... – Purag 2012-03-01 07:18:20

@BoltClock，因爲我們使用Gridview（一個asp.net控件）的樣式，我們g幾乎沒有選擇;（它們不會在'thead'內呈現'th' – Deeptechtons 2012-03-01 07:20:09

@Deeptechtons：那麼恐怕你不會在CSS選擇器中獲得任何地方，尤其是不支持IE6。看我的編輯。 – BoltClock 2012-03-01 07:21:03

假設，你的標題行會始終是第一行，你可以這樣做：

table tr:not(:first-child) { 
    background:red; 
}

這將選擇所有tr元素除first-child（如在第一個匹配元素中）。

This does not work in IE6 or any other version of IE only，IE9。

但是，如果您確實需要IE6支持，則必須使用Javascript。

2012-03-01 07:26:34 Purag

您可以使用'table tr + tr'替代IE7和IE8，但IE6無法實現。 – BoltClock 2012-03-01 07:27:32

+1側向思考 – Deeptechtons 2012-03-01 07:40:37

您可以使用<thead>標籤。

在我的情況表如下所示：

<table> 
    <thead> <tr><th>... </thead> 
    <tbody> <tr><td>... </tbody> 
</table>

這將適用於所有表：

tbody tr{ 
     background: yellow; 
}

這只是其中有頭表：

thead+tbody tr{ 
     background: red; 
}

2017-04-10 08:52:20

回答