如何將CSS設置僅設置爲外部表的td，而不是內部表？

Question

我正在使用表格佈局的遺留網頁（很遺憾，我不能用新的純HTML \ CSS佈局替換），我有以下問題。

我有這樣的情況：

<table class="externalTable"> 
    <tr id="firstRow"> 
     <td> 
      <div> 
       <table id="tablistOn"> 
        <!-- SOME ROWS ARE SHOWED --> 
       </table> 
      </div> 
     </td> 

     <td>SECOND td</td> 
     <td>THIRD td</td> 
    </tr> 
</table> 

我需要申請一個bottom-border屬性只對#firstRow行，我做這樣：

.externalTable #firstRow td, .externalTable #firstRow th { 
    border-top: 1px solid red; 
    border-bottom: 1px solid red; 
} 

，但在做這樣的問題在於，這種風格也適用於內部表格行（具有id="tablistOn"）的所有行列。

我認爲我可以覆蓋它爲此表定義一種新的樣式，但我問我是否可以將我的樣式僅應用於外部表，只選擇class="externalTable"表，而不是其內部表id="tablistOn"。

我怎樣才能以某種方式做到這一點？

TNX

Answer 1

您使用的後代選擇，這將一個元素內的匹配所有孩子。你需要的是兒童選擇器 - > - 它只會選擇直接元素的後代。

.externalTable #firstRow>td, .externalTable #firstRow>th { 
    border-top:1px solid red; 
    border-bottom:1px solid red; 
} 

• More information on child selectors
• More information on descendant selectors
• More information on selectors in general

Answer 2

嘗試這樣做：

.externalTable #firstRow td, .externalTable #firstRow th { 
    border-top: 1px solid red; 
    border-bottom: 1px solid red; 
} 

#firstrow table td { 
    border: none; 
} 

問候。

Answer 3

你可以用兩種方法來解決這個問題。

1.

#externalTable td{ 
// One Style 
} 

#tablistOn td{ 
// One Style 
} 

#externalTable td:not(#tablistOn td) { 
// Styles 
}