时间戳

首页 > 解决方案 > 防止第 n 个孩子选择嵌套 div 内的元素

html - 防止第 n 个孩子选择嵌套 div 内的元素

问题描述

我正在创建一个动态 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>

检查此处呈现的 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 中，因此无法直接修改它。

标签： htmlcssfrontendweb-frontend

解决方案

您可以如下修改代码以输出需求。为包含第三个和第四个的特定添加一个新的 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>

推荐阅读