Question

我只想将样式应用于外部元素（表格），而不是嵌套。

由于系统的复杂性（并且由于我不确定内部表格使用了哪些其他格式），我不想先更改所有元素的样式，然后为嵌套覆盖它们那些（这很容易）但实际上只处理外部元素/表（我现在也不能应用类，因为我必须修复我的一堆代码）。

所以我有类似的东西：

<body>
   <div>
    <...>
     <table>
         <tr>
             <td>
                 <table>
                     <tr>
                         <td>
                          I'm some content!
                         </td>
                     </tr>
                 </table>
             </td>
         </tr>
     </table>
    <...>
   </div>
</body>

代码笔：https://codepen.io/MichaelBootstrap/pen/bGBEbYy

第一次尝试

body *:not(table) table:not(.no_tab_margin) { 
    border: thin solid green; /* just to visualise it */
}

（我使用 .no_tab_margin 类来阻止所有页面上的丑陋修复，我将布局更改为响应式）但是由于浏览器从右到左的分辨率，这仍然适用于所有表格。

如何更改 CSS 选择器，使其仅适用于外部表？

为了防止典型答案：是的，可以，但会覆盖/重置内部表格中的其他样式：

table:not(.no_tab_margin) { 
    border: thin solid green; 
}
table table:not(.no_tab_margin) { 
    border: unset; /* all borders from all inner tables are gone */
}

如果我没有找到 CSS 的解决方案，我将编写一个小的 jQuery 脚本（在所有外部表上应用一个类），这样就可以了。

停止讨论嵌套表：是的，这已经过时了。但我现在不能改变它。系统包含500多个表单/页面，由PHP生成。而且，是的 - 我将逐步删除它们（并使其全部响应），但这是我接下来 2-3 年的工作 - 不是开玩笑）。

同样也适用于嵌套列表 (<ul><li><ul> ...)，因此不仅是旧系统的特殊问题。

Answer 1

您可以添加班级或 ID。并定义自定义样式

Answer 2

pete 的解决方案完美解决：

[ ]

如何仅选择外部元素（表格/列表）

2 个答案: