html - 两个外部 CSS ID，但只有第一个有效

Question

我的表格有一个外部 CSS。它有交替的阴影行。我希望一个表格单元格具有绿色背景和红色字体。另一个具有红色背景和绿色书写的单元格。但它只需要第一个ID。如果我把红色背景放在第一位，那会显示但不会显示绿色。如果我把绿色背景放在第一位，那会显示但不会显示红色。

tr:nth-child(odd) {background: #FFF}
tr:nth-child(even) {background: #CCC}
table,th,td
{
border:1px solid black; text-align:center;
}

 #worst {font-style:bold; background-color: red; color:green };
 #best  {font-style:bold; background-color: green; color:red };

html

<tr>
  <td>Hummer</td>
  <td>290</td>      
  <td>115</td>
  <td ID="worst">405</td>
 </tr>
<tr>
  <td>Bike</td>
  <td>0</td>        
  <td>5</td>
  <td ID="best">5</td>
 </tr>

这是外部 CSS 的属性还是其他错误？

Answer 1

这里的问题有点微妙，看到这些代码行末尾的分号了吗？

#worst {font-style:bold; background-color: red; color:green };
#best  {font-style:bold; background-color: green; color:red };

那些不应该在那里。发生的事情是，当您将分号放在原处时，CSS 解析器会尝试读取它。但这是一个语法错误，因此它会跳过您的其余代码，因为它假定它是无效的。