無法使用jQuery設置顏色

Question

我已經開始學習jQuery，並且我是trying來設置tr的color，但無法這樣做。不過，我可以成功更新其他css屬性，例如font-style。從我學到的至今設置的CSS屬性和值我們使用：

$(selector).css(property,value) 

所以，請指出錯誤。

HTML：

<table class="csr"> 
<tr><td>Row 1</td></tr> 
<tr><td>Row 2</td></tr> 
<tr><td>Row 3</td></tr> 
</table> 

<table class="aTable"> 
<tr><td>Row 11</td></tr> 
<tr><td>Row 22</td></tr> 
<tr><td>Row 33</td></tr> 
</table> 

CSS：

td { 
    color: blue; 
    font-weight: bold; 
    } 

table.aTable td{ 
    color: red; 
    font-weight: bold; 
    } 

的jQuery：

$("tr:first").css("font-style", "italic"); 
$("tr:first").css("color", "red"); 
$("tr:first").css("background-color","yellow"); 

$(".aTable tr:first").css("font-style", "italic"); 
$(".aTable tr:first").css("background-color","yellow"); 

Answer 1

您正在將css屬性應用於TR，後者被TD覆蓋，這是一個子元素，因此出現在TR的頂部。你

還可以結合你的CSS像這樣：

$('tr:first td').css({ 
      'font-style':'italic', 
      'color':'red', 
      'background-color':'yellow'} 
); 

$('.aTable tr:first td').css({ 
      'font-style':'italic', 
      'background-color':'yellow'} 
); 

和技術上的第一選擇也抓住了第二個表格的第一行。

Answer 2

這是因爲CSS優先的，顏色施加到tr，這意味着td { color:blue }更重，因此適用。應用樣式到td的tr裏面是一個可能的解決方案：

$("tr:first td").css("color", "red"); 

見jsfiddle。

Answer 3

您需要設置如下：

$("tr:first>td").css("color", "red"); 

DEMO