时间戳

首页 > 解决方案 > 如何仅选择外部元素（表格/列表）

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

问题描述

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

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

所以我有这样的事情：

<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> ...) 也是如此，因此不仅是旧系统的特殊问题。

标签： htmlcsscss-selectors

解决方案

您可以添加一个类或一个 ID。并定义自定义样式

推荐阅读