有 CSS 父选择器吗？
P粉176980522
2023-08-23 10:53:50
<p>如何选择作为锚元素直接父级的 <code></code></p><li> 元素？<p><br /></p>
<p>举个例子，我的 CSS 应该是这样的：</p>
<pre class="brush:php;toolbar:false;">li < a.active {
property: value;
}</pre>
<p>显然，有多种方法可以使用 JavaScript 实现此目的，但我希望 CSS Level 2 本身存在某种解决方法。</p>
<p>我尝试设置样式的菜单是由 CMS 喷出的，因此我无法将活动元素移动到 <code></code></p></li><li> 元素...（除非我对菜单进行主题化）创建模块，我不想这样做）。<p><br /></p></li>
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
您可以使用
:has()CSS 伪-类但它的浏览器支持有限（目前 Firefox 不支持）。
目前无法以适用于所有浏览器的方式选择 CSS 中元素的父元素。
选择器级别 4 工作草案 包括
:has()伪类将提供此功能。它将类似于 jQuery 实现，但目前 Firefox 不支持。li:has(> a.active) { /* styles to apply to the li tag */ }Firefox 是目前唯一默认不支持它的主流浏览器。
与此同时，如果您需要选择具有完全跨浏览器支持的父元素，则必须在 Firefox 中求助于 JavaScript。