如果子代具有焦点，则内的伪元素：focus允许选择父代。

如果元素具有tabindex属性，则可以聚焦该元素。

浏览器支持

标签索引

实例

.parent:焦点在{背景：hsl（199deg，65%，73%）；}/*演示样式*/正文{边距：0；}.父级{背景：hsl（0，0%，80%）；最小高度：100vh；显示：栅格；放置内容：中心；}.儿童{背景：hsl（0，0%，0%）；颜色：白色；填充：3rem；大纲：0；光标：指针；字体：18px/1.25无衬线；宽度：20ch；}<div class=“parent”><div class=“child”tabindex=“1”>点击或关注我，我的父母会改变。</div></div>

虽然目前标准CSS中没有父选择器，但我正在开发一个名为axe（即增强的CSS选择器语法/ACSSSS）的（个人）项目，该项目在其7个新选择器中包括：

一个直接的父选择器<（它允许相反的选择>）任意祖先选择器^（启用与[SPACE]相反的选择）

axe目前处于相对早期的BETA开发阶段。

请在此处查看演示：

.父级{浮动：左侧；宽度：180px；高度：180px；右边距：12px；背景色：rgb（191191191）；}.儿童{宽度：90px；高度：90px；边距：45px；填充顶部：12px；字体系列：无衬线；文本对齐：居中；字体大小：12px；背景色：rgb（255，255，0）；}child.using-axe<父级{背景色：rgb（255，0，0）；}<div class=“parent”><div class=“child”></div></div><div class=“parent”><div class=“child using axe”>这里，axe父选择器将外部方形变为红色。</div></div><script src=“https://rouninmedia.github.io/axe/axe.js“></script>

在上面的示例中，<是直接父选择器，因此

child.using-axe<父级

指：

.child.uning-axe的任何直接父级，即parent

您也可以使用：

.child.using-axe<div

这意味着：

child.using-axe的任何直接父级，它是一个div

更新2022 CSS选择器4

在CSS Selectors 4规范中，CSS引入了一个名为：has（）的新选择器，它最终允许我们选择父级。这意味着我们将能够针对一个包含特定子元素的CSS元素。这在Safari和Chrome105中都已得到支持。显示完整的支撑台在这里

父选择器工作

在CSS中，如果我们想选择一些东西，我们使用DOM下面的选择器。

例如，在div标记中选择p标记如下所示：

 div p {
   color: red;
}

不过，到目前为止，我们还无法真正选择其中包含p标记的div标记，这意味着我们不得不求助于Javascript。没有在CSS中实现这一点的主要原因是，这是一个相当昂贵的操作。CSS解析速度相对较快，但选择父标记需要相对较大的处理量。

使用：has选择器，我们现在可以选择具有p子级的div元素，或选择器的任何正常组合。

例如，选择带有子p的div现在看起来像这样：

div:has(p) {
  color: red;
}

这将使任何带有子p的div变为红色。

将父选择与其他选择器组合

就像任何其他CSS选择器一样，我们可以针对特定情况组合这些选择器。例如，如果只选择具有直接span子级的div标记：

div:has(> span) {
  color: red;
}

正如：的词汇所暗示的，它不仅仅局限于父母的选择。

例如，下面我们可以选择一个span，该span：有一个同级div：

span:has(+ div) {
color: red;
}

甚至，通过使用：not（）选择器选择一个没有子元素的元素。

例如，下面将选择任何没有p子级的div：

div:not(:has(p)) {
 color: red;
}

选择仅包含CSS中文本的元素

CSS中一个非常常见的问题是：empty标记不选择包含任何文本的元素，因此有时元素可以包含一个空格，而：empty将不适用。has选择器使我们能够选择只包含文本节点而不包含其他子元素的元素。

虽然这并不是简单的空元素和空格的完美解决方案（因为这将选择任何只包含文本的元素，而不包含额外的HTML DOM元素），但它确实让我们能够选择只包含文本节点的DOM元素，这在以前是不可能的。我们可以通过以下代码实现这一点：

div:not(:has(*)) {
  background: green;
}

在CSS 2中没有办法做到这一点。您可以将类添加到li中并引用a:

li.active > a {
    property: value;
}

这是Selectors Level 4规范中讨论最多的方面。这样，选择器就可以通过在给定的选择器（！）后面使用感叹号来根据其子元素设置元素的样式。

例如：

body! a:hover{
   background: red;
}

如果用户悬停在任何锚点上，将设置红色背景色。

但我们必须等待浏览器的实现：(

Selectors Level 4 Working Draft包含一个：has（）伪类，将提供此功能。它将类似于jQuery实现，但目前Firefox不支持。

li:has(> a.active) { /* styles to apply to the li tag */ }

截至2022年，Firefox是唯一默认不支持它的浏览器。

同时，如果需要选择完全支持跨浏览器的父元素，则必须在Firefox中使用JavaScript。