基本CSS DIV拼圖

我有一個簡單的HTML頁面，如下所示： -基本CSS DIV拼圖

<!DOCTYPE HTML> 
<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="test.css"> 
</head> 
<body> 
    <div id="div1"> 
     <form> 
     <table> 
      <tr> 
      <td>Col1</td> 
      <td>Col2</td> 
      </tr> 
     </table> 
     </form> 
    </div> 
</body> 
</html>

的CSS是： -

div#div1 table,td { 
    border: 1px solid black; 
} 

div#div2 table,td { 
    border: none; 
}

正如你所看到的，DIV2是不是在我的HTML甚至用，但是當我在瀏覽器中打開HTML文件時，這是在繪製表格邊框時生效的那個。它不應該使用div1的border屬性嗎？更奇怪的是 - 如果我在CSS文件中移動div＃div1上方的div＃div2，它可以正常工作。另外，如果我完全從CSS中刪除div＃div2，它就可以工作。我在這裏很愚蠢，錯過了很基本的東西嗎？

謝謝！

來源

2014-02-19 Do Will

http://www.w3.org/TR/selectors/#grouping – j08691

您使用的選擇器：DIV ＃div1 table和td，然後是div＃div2 table和td，所以基本上當你改變CSS中第一個和第二個選擇器的位置時，你定義了td兩次，第一次顯示none，然後顯示一個邊框。 table和td不是嵌套在div＃div1或div＃div2中。要在＃div1中定義table和td，您需要顯式聲明選擇器：＃div1 table，＃div1 td，併爲div2執行此操作。 –

div#div2 table,td

這兩個選擇器，div#div2 table以及td。擺脫逗號。

div#div2 table td

或者，如果你想樣式既<table>和<td> S，你需要重複整個選擇。

div#div2 table, div#div2 td

來源

2014-02-19 22:12:19

是的，逗號就是問題所在。你在這兩個規則中設計tr。另外，你可以直接編寫'＃div1 td {}'---在這種情況下，沒有任何理由要這麼具體。我會給班上課，做'.table-class td' – sheriffderek

謝謝！謝謝！！ –

試試這個

div#div1 table td { 
border: 1px solid black; 
} 

div#div2 table td { 
border: none; 
}

你不需要逗號的

來源

2014-02-19 22:13:24 Travis

每當你放上任何逗號，你必須重新定義整個選擇器。例如div＃div1 table，div＃div1 table td {border：1px solid black} –

你是對的，上面的人指出你可以做＃div1 td和＃div2 td在那裏有很多額外的必要。 – Travis

基本CSS DIV拼圖

回答

相關問題