html - 我可以选择一个不包含另一个元素的元素吗？

Question

在 CSS 中，我可以选择一个不包含另一个元素的元素吗？

例如：

<div>
    <p>ABC</p>
    <p>
        <q>123</q>
    </p>
    <p>ABC</p>
</div>

我想为每个p元素设置 css，但不是为包含q.

这可能吗？

Answer 1

如果这就是你的 HTML 的样子，你可以使用这样的方法......

div p {
   /* styles */
}

div p q {
  /* styles to *undo* previous styles, plus additional ones */
}

Answer 2

我在 p > q 元素上设置了我不想要的 p 元素的边距。

不幸的是，仅靠 CSS 是不可能的。但是，您可以使用 JavaScript 来实现这一点（下面的示例使用jQuery）：

您可以结合:not和:has：

$('p:not(:has(q))')

有了这个，您可以使用以下方法修改 CSS .css()：

$('p:not(:has(q))').css({
    'margin': '5px'
});

这是一个JSFiddle 演示。