css - css 选择一个带有 dt 但不是 dd 的 dl

问题描述

是否可以在 css 中选择所有带有 dt 但不包含 dd 的 dl？

<dl>
    <dt>Select this dl</dl>
</dl>
<dl>
    <dt>and this one</dl>
</dl>
<dl>
    <dt>But don't</dl>
    <dd>select this dl</dd>
</dl>
<dl>
    <dt>nor</dl>
    <dd>this one</dd>
</dl>
<dl>
    <dt>...but do also select this one</dl>
</dl>

（我不在乎空的 dl 案例。）

编辑：一个关于从孩子中选择父母的老问题被建议重复。有 CSS 父选择器吗？这在 11 年前是正确的，但现在已经过时了。到目前为止，这里给出的一个答案还引用了旧信息（“他们没有引入这种性质的东西的原因最初是由于性能。”）

确切地说，这在 CSS Selector level 4 规范中，尽管根据 caniuse，它尚未在任何浏览器中实现。 https://developer.mozilla.org/en-US/docs/Web/CSS/:has另外，来自那个 MDN 网络文档，

“在 CSS 选择器 4 级规范的早期版本中，: 有一个限制，它不能在样式表中使用。相反，它只能与 document.querySelector() 等函数一起使用；这是由于性能问题。此限制已被删除，因为没有浏览器以这种方式实现它。相反，浏览器目前仅支持在样式表中使用 :has()。

目前， document.querySelectorAll('dl.hideEmpty:not(:has(dd))') 尚未实现， dl.hideEmpty:not(:has(dd)) 也不会在样式表中工作；我最终可以将它移到那里，但与此同时我正在使用 $('dl.hideEmpty:not(:has(dd))').hide(); 获得相同的效果，因为它已经在 jQuery 中实现。

TLDR；正确的答案不是“它不能完成”。正确的答案是“它在规范中，但是 document.querySelectorAll 的浏览器和浏览器实现还不支持它，尽管 jQuery 已经支持了。”

标签： css

css - css 选择一个带有 dt 但不是 dd 的 dl

问题描述

解决方案

推荐阅读