css - 根据子属性过滤 CSS 选择器

Question

鉴于没有 parent selectors in CSS和 even in Python one must resort to XML to get to parent elements , 如何定位 <li>包含 <span class="foo"> 的元素元素？

<ul>
    <li><span class="bar">John</span></li>
    <li><span class="bar">Paul</span></li>
    <li><span class="foo">George</span></li>
    <li><span class="bar">Ringo</span></li>
</ul>

这是在 CSS 中:环境中没有 Javascript、jQuery、Selenium 或 Ford Pantera。

Answer 1

目前，您不能。

CSS Selectors Level 4 有一个新的选择器 :has

MDN Reference :has

The :has() CSS pseudo-class represents an element if any of the selectors, relative to the:scope of the given element, passed as parameters, matches at least one element. The :has() pseudo-class takes a selector list as an argument.

在你的情况下是

`li:has(span.foo) {}`

不过目前还没有浏览器支持这个选择器。