Fatal编程技术网
  • html/
  • Html CSS&；替代嵌套图元上的样式只能部分起作用

Html CSS&；替代嵌套图元上的样式只能部分起作用

html css

Html CSS&；替代嵌套图元上的样式只能部分起作用,html,css,html-table,Html,Css,Html Table,我想知道以下代码： <html> <head> <title>Test HTML</title> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> <table class=foo cellpadding="2" cellspacing="2">

我想知道以下代码：

<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>
问题是，在表及其嵌套表中交换类“foo”和“bar”时，td标记的样式设置不正确，或者至少不像我预期的那样。当从外部“bar”和内部“foo”更改为外部“foo”和内部“bar”时，除td元素的颜色外，颜色会按预期更改。既然表的其他元素正确更改，那么我在这里做错了什么

我知道使用
table table.foo{…}
是可行的，但这需要知道内部/嵌套表应该使用哪种样式，我真的不喜欢这种想法。我希望能够在需要时交换样式，而不在样式表中包含“继承”。。。另外，在样式表中口述foo或bar样式的顺序对我来说是不可取的。如果这实际上是常见的HTML/CSS实践，请纠正我。

CSS-层叠样式表

简单地说，如果在表中切换foo和bar类，还需要将
table.foo
css规则移动到
table.bar
类之上

解释如果
bar
嵌套在
foo
中，css规则
table.foo td
与
foo
和
bar
表中的tds都匹配。因此，如果
table.foo td
是在
table.bar td
规则之后声明的，
table.foo td
规则将覆盖
table.bar td

简单地说，如果在表中切换foo和bar类，还需要将
table.foo
css规则移动到
table.bar
类之上

解释如果
bar
嵌套在
foo
中，css规则
table.foo td
与
foo
和
bar
表中的tds都匹配。因此，如果
table.foo td
是在
table.bar td
规则之后声明的，
table.foo td
规则覆盖了
table.bar td
xzyfer的推理是正确的。一个简单的解决方法是添加

假设嵌套最多为2个级别，这很好，因为它覆盖了所描述的级联效果（即，应用的规则不再依赖于规则定义的顺序）


工作示例：
xzyfer的推理是正确的。一个简单的解决方法是添加

假设嵌套最多为2个级别，这很好，因为它覆盖了所描述的级联效果（即，应用的规则不再依赖于规则定义的顺序）


工作示例：
如果您只想影响表foo的直接子级，则需要一些子选择器。
您可能需要查找thees，因为我知道它们可以作为旧浏览器的替代品。此外，我建议将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会影响到它。或者，您必须切换样式的顺序，以便嵌套样式始终高于外部表格样式。
如果您只想影响表格foo的直接子级，则需要一些子选择器。
您可能需要查找thees，因为我知道它们可以作为旧浏览器的替代品。此外，我建议将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会影响到它。或者，您必须切换样式的顺序，以便嵌套样式始终高于外部表格样式。
谢谢。但是为什么桌子和tr能工作，而td不行呢？我不这么认为。实际上，tr规则和td规则的颜色似乎是相同的。所以实际上你看到的是td规则。我认为在tr上设置
背景色实际上不起作用，至少在所有主流浏览器中都不起作用。。。有没有办法实现我的目标（独立行为）尽管层叠？不知道你想实现什么？因为
table.foo
和
table.foo
与这些元素完全相关。不是他们的孩子。所以
table.foo
与
table.bar
不匹配。谢谢。但是为什么桌子和tr能工作，而td不行呢？我不这么认为。实际上，tr规则和td规则的颜色似乎是相同的。所以实际上你看到的是td规则。我认为在tr上设置
背景色实际上不起作用，至少在所有主流浏览器中都不起作用。。。有没有办法实现我的目标（独立行为）尽管层叠？不知道你想实现什么？因为
table.foo
和
table.foo
与这些元素完全相关。不是他们的孩子。所以
table.foo
与
table.bar
不匹配。你是对的，但是他希望类的样式在表之间可以互换，因此，他可以在html中替换
foo
和
bar
，样式将分别切换。这里的惯例是，像您那样正常编写样式
table.bar td{blah}
，然后只需复制该样式
table table.bar td{blah}
。请参见示例中的html/css。抱歉，我没有注意到添加，我以为您是在建议

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

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