防止第 n 个孩子选择嵌套 div 内的元素
Posted
技术标签:
【中文标题】防止第 n 个孩子选择嵌套 div 内的元素【英文标题】：prevent nth child from selecting element inside nested div 【发布时间】：2021-06-16 18:12:55 【问题描述】：我正在创建一个动态 html 页面，其结果类似于以下代码：
<!DOCTYPE html>
<html>
<head>
<style>
.ini table, th, td
border: 1px solid grey;
#hello table.tk-dtbl tbody tr td
background-color: white;
#hello tbody>:nth-child(2)
height: 130px;
</style>
</head>
<body>
<div id ="hello">
<table>
<tr>
<td>first</td>
<td>second</td>
</tr>
<tr>
<td>third</td>
<td>fourth</td>
</tr>
<tr>
<td>This</td>
<td>
<div class="ini">
<table style="width:100%" >
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>fifth</td>
<td>sixth</td>
</tr>
<table>
</div>
</body>
</html>
查看here呈现的html
我只希望包含第三个第四个的第二行的大小为 150px，而不是类 ini 中的第二行有什么方法可以防止 nth-child 修改 div ini 中的内容。
在 id ="hello" 中使用 ini 的边框属性也可以仅使用 html 和 css 来防止。
编辑： 我正在打印的表格是动态的，即 它的代码类似于
<uitk-tab-panel >
<uitk-dynamic-table id="hello" [model]="MyDetailModel"
[modelObservable]="MyDetails$"></uitk-dynamic-table>
</uitk-tab-panel>
值存在于 MyDetailModel 中，因此无法直接修改它。
【问题讨论】：
【参考方案1】：您可以修改如下代码以输出需求。为包含第三个和第四个的特定添加一个新的 id。还可以通过编辑 css 来控制 ini 边框。
/** CSS **/
table, th, td
border: 1px solid grey;
tr#h-150
height: 150px;
.ini table, .ini th, ini td border: none<!-- HTML -->
<body>
<div id ="hello">
<table>
<tr>
<td>first</td>
<td>second</td>
</tr>
<tr id="h-150">
<td>third</td>
<td>fourth</td>
</tr>
<tr>
<td>This</td>
<td>
<div class="ini">
<table style="width:100%" >
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td>fifth</td>
<td>sixth</td>
</tr>
<table>
</div>
</body>【讨论】：
我的表格是动态的，所以无法进行上述修改以上是关于防止第 n 个孩子选择嵌套 div 内的元素的主要内容，如果未能解决你的问题，请参考以下文章