Que*_*low 0 html css inheritance
我有以下代码:
<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不是table的子项,而是tbody.
层次结构是:table- > tbody- >tr
tbody的默认边界不是继承,而是"中",因此,tr不会继承.
试试这个:
tbody, tr {
border: inherit;
}