CSS和重写样式只能部分

，我想了解一下下面的代码：CSS和重写样式只能部分

<html> 
     <head> 
     <title>Test HTML</title> 
     <link rel="stylesheet" type="text/css" href="test.css"> 
     </head> 
<body> 
<table class=foo cellpadding="2" cellspacing="2"> 
     <tr> 
      <td><b>Contingency Table:</b></td> 
      <td><table class=bar border="2" align="left"> 
        <tr><td>blaa</td><td>blaa</td><td>blaa</td></tr> 
        <tr><td>blaa</td><td>blaa</td><td>blaa</td></tr> 
        <tr><td>blaa</td><td>blaa</td><td>blaa</td></tr> 
       </table> 
      </td> 
     </tr> 
</table> 
</body> 
</html>

与下面的CSS：

table { 
     border-width: 2px; 
     border-spacing: 2px; 
     border-style: solid; 
     } 

table.bar { 
     border-color: red; 
     background-color: white; 
} 

table.bar td { 
     background-color: green; 
} 

table.bar tr { 
     background-color: black; 
} 

table.foo { 
     border-color: blue; 
     background-color: white; 
} 

table.foo td { 
     border-color: black; 
     background-color: yellow; 
} 

table.foo tr { 
     background-color: yellow; 
}

的问题是，互换类时，“富“和”bar“在表格及其嵌套表格中，td-tags的风格没有正确设置，或者至少与我预期的不同。当从外部“bar”和内部“foo”更改为外部“foo”和内部“bar”时，除了td元素的颜色外，颜色会按预期更改。我在这里做错了什么，因为表格的其他元素更改正确？

我知道使用table table.foo {...}可以工作，但这需要知道内部/嵌套表应使用哪种样式，我不太喜欢这个想法。我希望能够在需要时交换样式，并且不在样式表中包含“继承”...此外，在样式表中指定foo或bar样式的顺序对我来说也是不可取的。请纠正我，如果这实际上是常见的HTML/CSS的做法。

来源

2011-02-16 Shadow

CSS - 级联样式表！简而言之，如果您在表中切换foo和bar类，则还需要将table.foo css规则移动到table.bar类之上。

解释如果bar嵌套在foo的CSS规则table.foo td同时匹配TDS同时在foo和bar表。所以它的table.foo td是在table.bar td规则之后声明的，table.foo td规则覆盖table.bar td

来源

2011-02-16 12:09:34 xzyfer

谢谢。但为什么然后做表和tr工作，但不是td？ – Shadow 2011-02-16 12:11:09

我不认为这是。实际上，tr规则和td规则的颜色看起来是相同的。所以实际上你看到的是td规则。我认为在tr上设置`background-color`实际上并不适用于所有主流浏览器。 – xzyfer 2011-02-16 12:15:56

xzyfer的推理是正确的。简单的解决方法可能是添加

table table.bar td { background-color: green !important; }

假设你的嵌套最多2级，这工作得很好，因为它覆盖描述的级联效应（即应用的规则不再依赖订单上的规则被定义）。

工作例如：http://jsfiddle.net/RQCQS/

来源

2011-02-16 12:28:22 davin

如果你只想要一拖效果，你需要一些子选择表foo的直接孩子。您可能需要查看，因为我知道它们可以用作旧版浏览器的解决方案。另外我建议将TBODY你的表作为Firefox会自动执行此操作，它搞砸了我的孩子选择的测试：

table.foo > tbody > tr > td { 
     border-color: black; 
     background-color: yellow; 
} 

table.bar > tbody > tr > td { 
     background-color: green; 
}

应该工作在Firefox，你就必须测试其他浏览器。你遇到的问题已在其他帖子中解释过，但它是级联样式表的性质，因为你的代码最初是table.foo中的任何td受到样式table.foo td的影响。或者，您将不得不切换样式的顺序，以便嵌套样式总是覆盖外部样式。

来源

2011-02-16 12:43:28 BenWells

CSS和重写样式只能部分

回答

相关问题