我有以下代码:
<html>
<head>
<style>
table {
border: solid red 2px;
}
tr {
border: solid red 2px;
}
td {
border: inherit;
}
</style>
</head>
<body>
<table>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
</table>
</body>
</html>
它工作正常。 “tr”的属性边界由子“td”继承。
但是这段代码的工作方式不同，尽管事实上工作逻辑是一样的:
<html>
<head>
<style>
table {
border: solid red 2px;
}
tr {
border: inherit;
}
td {
border: inherit;
}
</style>
</head>
<body>
<table>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
<tr>
<td> 1 </td> <td> 2 </td>
</tr>
</table>
</body>
</html>
“tr”的属性边界不被子“td”继承。为什么？
最佳答案
在呈现的最终 html 中，tr 不是表的子元素而是 tbody。
层次结构是:table -> tbody -> tr
tbody 的默认边框不是 inherit 而是 `medium ，因此 tr 不继承。
试试这个:
tbody, tr {
border: inherit;
}
关于html - CSS 中的奇怪继承，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26333423/