造型單個表格單元格

Question

我對樣式化單個表格單元格有問題。下面是我的說明問題的例子代碼：

<style> 
#bltable { border-collapse:collapse; width:575px; 
    -moz-user-select:none;} 
#bltable tr.row1 {background-color:#eff3f7;} 
#bltable tr.row2 {background-color:#ffffff;} 
#bltable tr.fotm td {background-color:#ffffd9;} 
#bltable td.op td {background-color:#f2f2c3;} 
</style> 
<table id="bloodlines"> 
    <tr class="row1"> 
     <th>1</th> 
     <th>2</th> 
     <th>3</th> 
     <th>4</th> 
    </tr> 
     <tr class="row2"> 
     <td>sup</td> 
     <td>sup</td> 
     <td class="op">sup</td> 
     <td>sup</td> 
    </tr> 
    <tr class="fotm"> 
     <td>sup</td> 
     <td>sup</td> 
     <td>sup</td> 
     <td>sup</td> 
    </tr> 
</table> 

正如你可以看到表中有兩個主要的顏色（ROW1和2行），其改變各行（棋盤格樣式）。 該表還具有「額外的第三種顏色」的「月份味道」行。 最後，表格有一個td class =「op」，它將是第四種顏色。

我遇到的問題是row1，row2和fotm類重寫「op」類顏色，第四種顏色不顯示。我可以用任何不同的方式寫出它來使它工作嗎？

我已經試過：

#bltable tr.row1 

（不到底「TD」），但是我沒有得到任何排在顏色都，看到「X是不能繼承它適用於一個封閉的標籤。 「

此外，林不知道它的閹必須有額外的‘TD’在給定的

#bltable td.op td {} 

到底該td.op應採取部分的護理。在原則上既要

.op {} 

夠了嗎？

任何想法？

Answer 1

你需要在你的CSS

#bltable td.op td {background-color:#f2f2c3;}

改變這一行來此

#bltable tr td.op {background-color:#f2f2c3;}

你有兩個td S和第一的.op。

例子：http://jsfiddle.net/jasongennaro/LdSM3/

Answer 2

你的規則是錯誤的。它應該是：

#bltable td.op {background-color:#f2f2c3;} 

或

#bltable tr td.op {background-color:#f2f2c3;} 

Answer 3

你必須使用：

bltable td.op {background-color:#f2f2c3;} 

您的權利，額外的 「TD」 是沒有必要的。

Answer 4

你<td class="op">需要與#bltable td.op {background-color:#f2f2c3;}沒有#bltable td.op td {background-color:#f2f2c3;}

http://jsfiddle.net/AlienWebguy/QvdsQ/

Answer 5

#bltable td.op td設置樣式會選擇以下td.op任何TD小號，所以這不是你要找的選擇。

基本上，您遇到了specificity problem：您的row1和row2選擇器在其選擇器中有一個HTML元素，因此與您的td.op選擇器相比，它們更加具體並且「勝出」你需要讓你的td.op選擇具體（或更具體），比別人那麼它將應用於：

#bltable tr.row1 td {background-color:#eff3f7;} 
#bltable tr.row2 td {background-color:#ffffff;} 
#bltable tr.fotm td {background-color:#ffffd9;} 
#bltable tr td.op {background-color:#f2f2c3;} 

上面，你有一個ID，一個類的元素，併爲每個選擇的元素。這應該爲你做。

Answer 6

td.op之後的td是錯誤的，因爲沒有嵌套的TD。 我會在td.op之後添加！important，應該這樣做。

（我正在寫這個智能手機，所以我不能測試它，對不起）