gpt4 book ai didi

html - 嵌套元素上的 CSS 和覆盖样式仅部分起作用

转载 作者:太空宇宙 更新时间:2023-11-03 20:59:54 25 4
gpt4 key购买 nike

我想知道以下代码:

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

问题是,在表格及其嵌套表格中交换类“foo”和“bar”时,td-tags 的样式设置不正确,或者至少不是我所期望的那样。当从外部“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 匹配两个tds foobar 表。因此,如果 table.foo tdtable.bar td 规则之后声明,则 table.foo td 规则会覆盖 表.bar td

关于html - 嵌套元素上的 CSS 和覆盖样式仅部分起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5016181/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com