CSS選擇器>不工作

我有一個表的第二行，第一列包含另一個表。我想爲父表格行設置背景顏色，但不應該應用於子表格行。爲此，我嘗試使用CSS Child-selector（>）。但它不工作...任何人都可以告訴我原因。CSS選擇器>不工作

這裏是我的一段代碼：

<!DOCTYPE HTML PUBLIC> 
<html> 
<head> 
    <style> 
    table.tab > tr{ 
    background:red; 
    } 
    </style> 
</head> 

<body> 
    <table class="tab"> 
    <tr> 
    <td>asdf</td><td>afda</td><td>asdfdsa</td> 
    </tr> 

    <tr> 
    <td colspan="3"> 
     <table> 
     <tr> 
      <td>afds</td><td>Trkaladf</td><td>inner Tab</td> 
     </tr> 
     </table> 
    </td> 
    </tr> 

    </table> 
</body> 
</html>

來源

2012-08-16 Rama Rao M

不是一個答案，但添加表，表，當你probbaly做錯了。 I.e .:使用表格進行佈局。 – PeeHaa 2012-08-16 11:19:10

請注意，您正在使用的文檔類型將導致瀏覽器中的頁面出現怪癖模式。 – Alohci 2012-08-16 11:32:23

table.tab > tbody > tr的確將風格賦予僅第一行。如果你看看帶有螢火蟲的DOM，你可以確認它。子表的第一行沒有以同樣的方式得到樣式。

但是，由於您的子表位於具有紅色背景的錶行內，並且子表沒有指定背景，所以子表將沒有背景 - 因此您仍然會看到紅色背景「through 「孩子桌子。

可能的解決方法 - 造型子表，以及使用不同的背景：

table.tab > tbody > tr { 
background:red; 
} 

table.tab table > tbody > tr{ 
background:white; 
}

來源

2012-08-16 11:33:03 OpherV

我覺得有些瀏覽器，如自動渲染一個tbody元素嵌套table和tr之間，這將導致您的直接孩子選擇到不行。

table.tab > tbody > tr, table.tab > tr{ 
    background:red; 
    }

http://jsfiddle.net/vppXL/

但是，如果這個內容是佈局和不表格數據，你應該not be using a table element。

來源

2012-08-16 11:19:43 Curt

你小提琴不符合你的答案。 – PeeHaa 2012-08-16 11:22:49

仍然在Chrome中將所有行都變爲紅色 - http://jsfiddle.net/vppXL/1/ – 2012-08-16 11:28:25

@ZoltanToth沒有嵌套的'tr'沒有着色。然而，它的父項是，並且由於嵌套'tr'沒有顏色，所以顯示父項顏色 – Curt 2012-08-16 11:33:25

做的是自己設定的 <thead>和 <tbody>部分，像這樣

最棒的地方：

<table class="tab"> 
    <thead> 
     <tr> 
      <td>asdf</td> 
      <td>afda</td> 
      <td>asdfdsa</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td colspan="3"> 
       <table> 
        <tr> 
         <td>afds</td> 
         <td>Trkaladf</td> 
         <td>inner Tab</td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </tbody> 
</table>

然後你可以選擇設置你的標記在TBODY目標行，但不THEAD：

table.tab tbody { 
    background: red; 
}

但是，最好將background-color設置爲您的<td>元素，而不是：

table.tab > tbody > tr > td { 
    background: red; 
}

有一個jsFiddle example here。

來源

2012-08-16 11:24:12

CSS選擇器>不工作

回答

相關問題