不理解兒童選擇器

我有一些傳統的嵌套表佈局。不理解兒童選擇器

我希望父表的<td> s具有一種顏色的邊框，而內表沒有。

這裏：

<html> 
    <head> 
    <style> 
     table tr td{ 
    border:none; 
     } 
     table.listTable tr td 
     { 
    border:1px solid red; 
     } 
    </style> 
    </head> 
    <body> 
    <table class="listTable"> 
     <tr> 
    <td> 
     left 
    </td> 

    <td> 
     <table style="width:100%;"> 
     <tr> 
      <td> 
     1 
      </td> 
      <td> 
     2 
      </td> 
     </tr> 
     </table> 
    </td> 

    <td> 
     right 
    </td> 
     </tr> 
     <tr> 
    <td> 
     left 
    </td> 
    <td> 
     doubles 
    </td> 
    <td> 
     right 
    </td> 
     </tr> 
    </table> 
    </body> 
</html>

如何獲得在頂部中間細胞標記1和2不具有通過修改.listTable CSS選擇適用於他們的紅色CSS子電池？

這似乎是我想要的東西：

table.listTable > tr td

但它完全打破了選擇。

有人可以解釋我需要什麼選擇器，以及爲什麼我試過的選擇器打破布局？

本上的jsfiddle：http://jsfiddle.net/nvZbq/

來源

2011-11-04 Conrad.Dean

可能重複http://stackoverflow.com/questions/5568859/why-doesnt-table-tr- td-work） – BoltClock

@BoltClock我會認爲它不是重複的。 OP不知道'tr> td'與'tr td'的含義。這可能對其他人有幫助。 –

@KP .:你說得對 - 我應該剛剛添加了一條評論，說「這就是爲什麼你的選擇器壞了」：S – BoltClock

查看您選擇的Firebug或其他瀏覽器開發工具中生成的標記。你會發現<tr>不是實際上是子元素<table> s。如果您不使用<tbody>，瀏覽器會爲您添加一個。

因此，這裏的選擇使用：

table.listTable > tbody > tr > td

來源

2011-11-04 19:42:57

並非所有的瀏覽器都添加了一個tbody，但是可能我們所關心的只是 –

哪些不？ –

我猜想IE和Opera的老版本。另外，Netscape。在採用HTML 4.0規範之前，在IE 4中引入了 – BoltClock

table.listTable > tbody > tr > td{ 
    border:1px solid red; 
}

添加和td的>之間tr。記住它表示一個直接的孩子，所以table.listTable > tbody > tr > td描述了表格單元格（td），該表格單元格（td）是表格行（tr）的直接孩子，該表格是類別listTable的直接子表格。現在嵌套的表格不應該選擇樣式。

您的原始風格table.listTable > tr td有兩個問題。首先它表示ANYWHERE td，它嵌套在表格行下方的任何一個表格中，該表格是類別爲listTable的直接子表格。這就是爲什麼原始樣式將紅頂邊框應用於子表格的原因。它將爲嵌套在根表下的任何<td>標記執行相同的操作。第二，馬特在下面糾正了我，瀏覽器會在表格中插入一個<tbody>標籤，因此您需要將其包含在CSS選擇器鏈中或直接後代規則不起作用。（謝謝馬特）

希望這有助於。

來源

2011-11-04 19:40:38

沒有。 http://stackoverflow.com/questions/5568859/why-doesnt-table-tr-td-work –

@Matt謝謝，好趕上。更新。所描述的原始問題仍然適用，加上您指出的內容。 –

的問題是與邊框選擇的特異性。它比沒有的更具體。

有幾種方法可以做到這一點。

一種方法是添加特異性的腸子表選擇：

table.listTable table tr td

編輯注：「兒童」與「直子」在您選擇進場的「>」時，一些瀏覽器添加tbody，有些則不行。

table.listTable tr td  {  border:1px solid red;  } 
table.listTable table tr td{  border:none;  }

例如：http://jsbin.com/oyihop/edit#javascript,html,live

的[？爲什麼不表> TR> TD工作（

來源

2011-11-04 19:47:10

海事組織會變得混亂，而且會更好地直接定位您想要的元素，而不是先定位所有tds，然後通過第二個樣式定義在嵌套元素上「刪除」樣式。雖然這只是我.. –

「小孩」和「直接孩子」的意思是一樣的東西。 – BoltClock

@BoldClock井表> td與表td不完全相同。也許我的術語不太清楚，但我的參考文獻中的「直接的孩子」並不意味着孫子 –

不理解兒童選擇器

回答

相關問題