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>");

在a.css文件中：

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

第二部分改变颜色，但第一部分不会改变。

如果我使用：

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

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

Answer 1

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

#after td {
   background-color: red; 
}

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

#after {
   background-color: red; 
}

您正在使用它们的第一个选择器将选择嵌套在另一个td元素内的td元素，这些元素进一步嵌套在一个ID为#after的元素中，这个元素在语义上是不正确的。

您正在使用的第二个选择器选择相邻的元素。这样就会选择与另一个td相邻的td进一步嵌套在具有#after的元素中

Demo

Answer 2

空格：这是后代选择器

#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; 
}

Answer 3

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

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

编辑：

这不适用于IE8＆lt;所以在这种情况下你可以使用@ mr.aliens的答案。

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

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

3 个答案: