我只想将样式应用于外部元素(表格),而不是嵌套。
由于系统的复杂性(并且由于我不确定内部表格使用了哪些其他格式),我不想先更改所有元素的样式,然后为嵌套覆盖它们那些(这很容易)但实际上只处理外部元素/表(我现在也不能应用类,因为我必须修复我的一堆代码)。
所以我有类似的东西:
<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> ...
),因此不仅是旧系统的特殊问题。
答案 0 :(得分:1)
您可以添加班级或 ID。 并定义自定义样式
答案 1 :(得分:0)
pete 的解决方案完美解决:
[ ]