jquery - CSS 代码适用于某一部分，但不适用于其他部分

Question

我想为第二列着色。我在 a.js 文件中有代码：

if($data == 0 ){
   $display.after("<tr id='after'><td></td><td>First Part</td></tr>");
   return; 
}

$display.after("<tr id='after'><td></td><td><table>..Second Part...</table></td></tr>"); 

在一个 .css 文件中：

#after td td {
   background-color: red; 
}

第二部分改变颜色，但第一部分没有改变。

如果我使用：

#after td + td {
    background-color: red; 
}

或者如果我在第一部分添加一个表格。两者都有效，为什么？

Answer 1

要仅设置您的第二个 td 样式，#after您可以使用以下代码：

#after td:nth-child(2)
{
   background-color: red; 
}

编辑：

这不适用于 IE8 < 所以在这种情况下，您可以使用 @mr.aliens 答案。

#after td + td /* Selects td adjacent to another td */
{
   background-color: red; 
}

Answer 2

你在那里使用了错误的选择器..如果你想在你需要使用的所有td嵌套内部应用背景#after

#after td {
   background-color: red; 
}

或者您也可以将背景应用于tr元素

#after {
   background-color: red; 
}

您使用的第一个选择器将选择td嵌套在另一个td元素中的元素，该元素进一步嵌套在具有#after语义不正确 id 的元素中。

您使用的第二个选择器选择相邻元素。所以这将选择td与另一个相邻td的进一步嵌套在一个元素中的元素#after

演示

Answer 3

空格：是后代选择器

#after td td {  //affects  tds within #after td
   background-color: red; 
}

+ 签名：

它是相邻的兄弟组合子。它结合了两个具有相同父级的简单选择器序列，第二个必须在第一个之后立即出现。

#after td + td {  //affects only the next td of #after td
    background-color: red; 
}

这可能会帮助你。

#after td {  //affects all the td in #after 
    background-color: red; 
}