仅在没有h1同级元素时才设置元素样式

Question

我的页面上有两组标记：

<div class="row">
    <div>Some random div(s)</div>
    <table></table>
</div>

和

<div class="row">
    <div>Some random div(s)</div>
    <h1>Table Title</h1>
    <table></table>
</div>

如果margin-top 中没有div.row > table，我想将h1和其他一些CSS自定义应用于 div.row。 例如，在上面的标记中，第一个table将被设置样式，但第二个不会。

我找不到为这组条件设置规则的便捷方法。我是SASS的新手，不想在table元素中添加特定的类。

你有什么建议可以做到这一点吗？

Answer 1

SASS最终编译为CSS，根据CSS规则，这样的选择器不可能。你必须通过脚本（javascript，jQuery）来做到这一点。对此有很多疑问。请查看以下参考资料：

Apply CSS styles to an element depending on its child elements

CSS selector for “foo that contains bar”?

Is there a CSS parent selector?

最后，检查this link，了解为什么我们没有父选择器选项的原因。

Answer 2

当您想要在相邻的table元素之后始终显示的h1样式时，可以通过使用:not()的组合在CSS中实现这一点和next-sibling（+）选择器。

.row > :not(h1) + table

该规则将匹配 之前的任何table元素，其前面是不是的元素<{1}} < / em>类h1的元素的直接子元素。

＆＃13;

＆＃13;

.row

＆＃13;

.row > :not(h1) + table {
  border: 1px solid blue;
  margin-top: 10px;
}

＆＃13;

＆＃13;

＆＃13;