有 CSS 父选择器吗？

目前没有办法在 CSS 中选择元素的父级，至少不是一种适用于所有浏览器的方式。

如果有办法做到这一点，它将在当前的 CSS 选择器规范中：

选择器 3 级规范

CSS 2.1 选择器规范

也就是说，Selectors Level 4 Working Draft 包含将提供此功能的 :has() 伪类。它将类似于 jQuery implementation。

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

但是，从 2022 年开始，it is only supported by Safari。

同时，如果您需要选择父元素，则必须使用 JavaScript。

---

是：:has()

浏览器支持：Safari by default; Chrome (behind a flag)

---

我认为您不能仅在 CSS 中选择父级。

但由于您似乎已经有一个 .active 类，因此将该类移到 li（而不是 a）会更容易。这样，您只能通过 CSS 访问 li 和 a。

---

您可以使用 this script：

*! > input[type=text] { background: #000; }

这将选择文本输入的任何父级。但是等等，还有更多。如果需要，您可以选择指定的父级：

.input-wrap! > input[type=text] { background: #000; }

或者在它处于活动状态时选择它：

.input-wrap! > input[type=text]:focus { background: #000; }

看看这个 HTML：

<div class="input-wrap">
    <input type="text" class="Name"/>
    <span class="help hide">Your name sir</span>
</div>

您可以在 input 处于活动状态时选择该 span.help 并显示它：

.input-wrap! .help > input[type=text]:focus { display: block; }

还有更多功能；只需查看插件的文档即可。

顺便说一句，它适用于 Internet Explorer。

---

正如其他几个人所提到的，没有办法仅使用 CSS 来设置元素的父级样式，但以下方法适用于 jQuery：

$("a.active").parents('li').css("property", "value");

---

没有父选择器；就像没有以前的兄弟选择器一样。没有这些选择器的一个很好的原因是浏览器必须遍历一个元素的所有子元素来确定是否应该应用一个类。例如，如果你写：

body:contains-selector(a.active) { background: red; }

然后浏览器将不得不等到它加载并解析所有内容，直到 </body> 来确定页面是否应该是红色的。

文章Why we don't have a parent selector 详细解释了它。

---

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

li.active > a {
    property: value;
}

---

如果后代具有焦点，则伪元素 :focus-within 允许选择父元素。

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

Browser support for focus-within

Tabindex

例子

.parent:focus-within { 背景：hsl(199deg, 65%, 73%); } /* 演示样式 */ body { margin: 0; } .parent { 背景：hsl(0, 0%, 80%);最小高度：100vh；显示：网格；地点内容：中心； } .child { 背景：hsl(0, 0%, 0%);白颜色;填充：3rem；大纲：0；光标：指针；字体：18px/1.25 无衬线；宽度：20ch； }

---

尝试将 a 切换到 block 显示，然后使用您想要的任何样式。 a 元素将填充 li 元素，您可以根据需要修改其外观。不要忘记将 li 填充设置为 0。

li {
  padding: 0;
  overflow: hidden;
}
a {
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...
}
a.active {
  color: ..., background: ...
}

---

CSS 选择器“General Sibling Combinator”可以用于您想要的：

E ~ F {
    property: value;
}

这匹配前面有 E 元素的任何 F 元素。

---

据我所知，不在 CSS 2 中。 CSS 3 具有更强大的选择器，但并非在所有浏览器中都一致地实现。即使使用改进的选择器，我也不相信它会完全完成您在示例中指定的内容。

---

我知道 OP 正在寻找 CSS 解决方案，但使用 jQuery 很容易实现。在我的例子中，我需要为子 <li> 中包含的 <span> 标签找到 <ul> 父标签。 jQuery 具有 :has 选择器，因此可以通过它包含的子项来识别父项：

$("ul:has(#someId)")

将选择具有 ID 为 someId 的子元素的 ul 元素。或者要回答原始问题，类似以下内容应该可以解决问题（未经测试）：

$("li:has(.active)")

---

这是 Selectors Level 4 规范中讨论最多的方面。这样，选择器将能够通过在给定选择器 (!) 后使用感叹号来根据其子元素设置元素的样式。

例如：

body! a:hover{
   background: red;
}

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

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

---

您可以尝试使用超链接作为父级，然后在悬停时更改内部元素。像这样：

a.active h1 {color:red;}

a.active:hover h1 {color:green;}

a.active h2 {color:blue;}

a.active:hover h1 {color:yellow;}

这样，您可以根据父元素的翻转更改多个内部标签中的样式。

---

下面是使用 pointer-events 和 hover 的 hack：

---

目前没有父选择器，甚至在 W3C 的任何讨论中都没有讨论它。您需要了解浏览器如何评估 CSS 才能真正了解我们是否需要它。

这里有很多技术解释。

Jonathan Snook explains how CSS is evaluated。

Chris Coyier on the talks of Parent selector。

Harry Roberts again on writing efficient CSS selectors。

但是Nicole Sullivan has some interesting facts on positive trends。

这些人都是前端开发领域的顶尖人物。

---

只是水平菜单的一个想法......

HTML 的一部分

<div class='list'>
  <div class='item'>
    <a>Link</a>
  </div>
  <div class='parent-background'></div>
  <!-- submenu takes this place -->
</div>

CSS 的一部分

/* Hide parent backgrounds... */
.parent-background {
  display: none; }

/* ... and show it when hover on children */
.item:hover + .parent-background {
  display: block;
  position: absolute;
  z-index: 10;
  top: 0;
  width: 100%; }

Updated demo and the rest of code

Another example 如何将其与文本输入一起使用 - 选择父字段集

---

有一个插件可以扩展 CSS 以包含一些在设计网站时真正有用的非标准功能。它称为 EQCSS。

EQCSS 添加的其中一件事是父选择器。它适用于所有浏览器，Internet Explorer 8 及更高版本。这是格式：

@element 'a.active' {
  $parent {
    background: red;
  }
}

所以这里我们对每个元素 a.active 打开了一个元素查询，对于该查询中的样式，像 $parent 这样的东西是有意义的，因为有一个参考点。浏览器可以找到父节点，因为它与 JavaScript 中的 parentNode 非常相似。

Here's a demo of $parent 和 another $parent demo that works in Internet Explorer 8，以及 a screenshot in case you don't have Internet Explorer 8 around to test with。

EQCSS 还包括 meta-selectors：$prev 用于选定元素之前的元素，而 $this 仅用于与元素查询匹配的元素，等等。

---

现在是 2019 年，latest draft of the CSS Nesting Module 实际上有这样的东西。引入 @nest 规则。

3.2.嵌套规则：@nest 虽然直接嵌套看起来不错，但它有点脆弱。一些有效的嵌套选择器，如 .foo &，是不允许的，并且以某些方式编辑选择器可能会使规则意外无效。同样，有些人发现嵌套很难从视觉上与周围的声明区分开来。为了帮助解决所有这些问题，本规范定义了@nest 规则，它对如何有效嵌套样式规则施加的限制较少。它的语法是： @nest = @nest { } @nest 规则的功能与样式规则相同：它以选择器开头，并包含适用于选择器匹配的元素的声明。唯一的区别是@nest 规则中使用的选择器必须是包含嵌套的，这意味着它在某处包含一个嵌套选择器。如果所有单独的复杂选择器都包含嵌套，则选择器列表是包含嵌套的。

（从上面的 URL 复制并粘贴）。

本规范下的有效选择器示例：

.foo {
  color: red;
  @nest & > .bar {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .foo > .bar { color: blue; }
 */

.foo {
  color: red;
  @nest .parent & {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   .parent .foo { color: blue; }
 */

.foo {
  color: red;
  @nest :not(&) {
    color: blue;
  }
}
/* Equivalent to:
   .foo { color: red; }
   :not(.foo) { color: blue; }
 */

---

W3C 排除了这种选择器，因为它会对浏览器产生巨大的性能影响。

---

从技术上讲，没有直接的方法可以做到这一点。但是，您可以使用 jQuery 或 JavaScript 对其进行排序。

但是，您也可以这样做。

a.active h1 {color: blue;}
a.active p {color: green;}

jQuery

$("a.active").parents('li').css("property", "value");

如果您想使用 jQuery 来实现这一点，这里是 jQuery parent selector 的参考。

---

简短的回答是NO；在 CSS 的这个阶段，我们没有 parent selector，但如果您无论如何都不必交换元素或类，则第二种选择是使用 JavaScript。像这样的东西：

var activeATag = Array.prototype.slice.call(document.querySelectorAll('a.active'));

activeATag.map(function(x) {
  if(x.parentNode.tagName === 'LI') {
    x.parentNode.style.color = 'red'; // Your property: value;
  }
});

如果您在应用程序中使用 jQuery，或者更短的方法：

$('a.active').parents('li').css('color', 'red'); // Your property: value;

---

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

直接父选择器 <（允许对 > 进行相反选择）任何祖先选择器 ^（允许对 [SPACE] 进行相反选择）

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

在此处查看演示：

.parent {浮动：左；宽度：180px；高度：180px；右边距：12px；背景颜色：RGB（191、191、191）； } .child { 宽度：90px;高度：90px；边距：45px；上边距：12px；字体系列：无衬线；文本对齐：居中；字体大小：12px；背景色：rgb(255, 255, 0); } .child.using-axe < .parent { 背景颜色：rgb(255, 0, 0); }

在上面的例子中，< 是 直接父选择器，所以

.child.using-axe < .parent

方法：

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

您也可以使用：

.child.using-axe < div

这意味着：

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

---

CSS 父选择器（也称为 :has() 选择器）终于登陆 Safari TP 137。该功能目前也在 Chrome 中实现。 (MDN Documentation)

父级选择是通过伪类 :has() 完成的。例如，div:has(> .child) 将选择所有具有 child 类的子元素的 <div> 元素。

其他示例：

选择元素的直接父级

<div>
  <p>Child Element</p>
</div>

div:has(> p)

选择一个元素的所有父元素

<div id="grandparent">
      <div id="parent">
            <div id="child"></div>
      <div>
</div>

以下选择器将同时选择 grandparent 和 parent

div:has(.child)

您还可以将它用于嵌套选择器，甚至用于其他伪类：

div:has(> :nth-child(10))

其他有效的 CSS 运算符可用于自定义查询。

请留意 caniuse.com/css-has 的浏览器兼容性。

---

至少在 CSS 3 之前（包括 CSS 3），您不能这样选择。但是现在用 JavaScript 可以很容易地做到这一点，你只需要添加一些 vanilla JavaScript，注意代码很短。

细胞 = document.querySelectorAll('div'); [].forEach.call(cells, function (el) { //console.log(el.nodeName) if (el.hasChildNodes() && el.firstChild.nodeName=="A") { console.log(el) }; });

---

当前仅当我们在父元素中有 <input> 元素时才能根据子元素更改父元素。当输入获得焦点时，其对应的父元素可以使用 CSS 受到影响。

以下示例将帮助您了解在 CSS 中使用 :focus-within。

.outer-div { 宽度：400px;高度：400px；填充：50px；浮动：左 } .outer-div:focus-within { 背景：红色； } .inner-div { 宽度：200px;高度：200px；向左飘浮;背景：黄色；填充：50px； }

---

不，您不能仅在 CSS 中选择父级。

但由于您似乎已经有一个 .active 类，因此将该类移到 li（而不是 a）会更容易。这样，您只能通过 CSS 访问 li 和 a。

---

有任何想法吗？

如果 CSS4 在 向后走 中添加了一些 钩子，那它会很漂亮。在此之前，可以（尽管不建议）使用 checkbox 和/或 radio inputs 来打破常规事物连接的方式，并且通过这种方式还允许CSS在其正常范围之外运行......

/* 隐藏可能稍后显示的内容 */ .menu__checkbox__selection, .menu__checkbox__style, .menu__hidden { display: none;可见性：隐藏；不透明度：0；过滤器：阿尔法（不透明度= 0）； /* 旧版 Microsoft 不透明度 */ } /* 内容和样式菜单的基本样式 */ .main__content { background-color: lightgray;颜色：黑色; } .menu__hidden { 背景颜色：黑色；颜色：浅灰色； /* 让列表看起来不那么_listy_ */ list-style: none;左填充：5px； } .menu__option { 框大小：内容框；显示：块；位置：静态； z-index：自动； } /* ▼ - \u2630 - 三栏 */ /* .menu__trigger__selection::before { content: '\2630';显示：内联块； } */ /* ▼ - 向下箭头 */ .menu__trigger__selection::after { content: "\25BC";显示：内联块；变换：旋转（90度）； } /* 自定义看起来更像 `select` 如果你喜欢 */ .menu__trigger__style:hover, .menu__trigger__style:active { cursor: pointer;背景颜色：深灰色；白颜色; } /** * 检查复选框/收音机时要做的事情 */ .menu__checkbox__selection:checked + .menu__trigger__selection::after, .menu__checkbox__selection[checked] + .menu__trigger__selection::after { transform: rotate(0deg); } /* 这一点你可能在别处看到 */ .menu__checkbox__selection:checked ~ .menu__hidden, .menu__checkbox__selection[checked] ~ .menu__hidden { display: block;能见度：可见；不透明度：1；过滤器：阿尔法（不透明度= 100）； /* 微软！？ */ } /** * Hacky CSS 仅根据非内联复选框进行更改 * ...也就是在此之后您无法取消看到的内容... */ .menu__checkbox__style[id="style-default"]:checked ~ .main__content { 背景颜色：浅灰色；颜色：黑色; } .menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] { color: darkorange; } .menu__checkbox__style[id="style-one"]:checked ~ .main__content { 背景颜色：黑色；颜色：浅灰色； } .menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] { color: darkorange; } .menu__checkbox__style[id="style-two"]:checked ~ .main__content { background-color: darkgreen;红色; } .menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] { color: darkorange; }

... 漂亮粗，但仅使用 CSS 和 HTML 就可以通过链接 id 和 { 从几乎任何地方触摸和重新触摸除 body 和 :root radio/checkbox inputs 和 label triggers 的 4} 个属性；可能有人会在某个时候展示如何重新触摸它们。

另一个警告是，只有 一个 input 可能使用特定 id，换句话说，首先 checkbox/radio 赢得一个切换状态。 . 但是多个标签都可以指向同一个 input，尽管这会使 HTML 和 CSS 看起来更加粗暴。

...我希望有某种解决方法存在于 CSS Level 2 中...

我不确定其他伪类，但我:checked为 pre-CSS 3。如果我没记错的话，它类似于 [checked]，这就是为什么您可以在上面的代码中找到它，例如，

.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
 /* rules: and-stuff; */
}

...但是对于像 ::after 和 :hover 这样的东西，我完全不确定它们最初出现在哪个 CSS 版本中。

综上所述，请永远不要在生产中使用它，即使是愤怒也不行。作为一个玩笑，或者换句话说，仅仅因为可以做某事并不总是意味着它应该做。

---

尝试这个...

此解决方案使用无 Javascript 的纯 CSS2 规则，适用于所有新旧浏览器。单击时，子 anchor 标记会激活其 active 伪类事件。然后它简单地隐藏自己，允许 active 事件冒泡到父 li 标记，然后他重新设置自己的样式并以新的样式再次显示他的锚子。孩子已经为父母设置了样式。

使用您的示例：

<ul>
    <li class="listitem">
        <a class="link" href="#">This is a Link</a>
    </li>
</ul>

现在将这些样式与 a 上的 active 伪类一起应用，以在单击链接时重新设置父 li 标记的样式：

a.link {
    display: inline-block;
    color: white;
    background-color: green;
    text-decoration: none;
    padding: 5px;
}

li.listitem {
    display: inline-block;
    margin: 0;
    padding: 0;
    background-color: transparent;
}

/* When this 'active' pseudo-class event below fires on click, it hides itself,
triggering the active event again on its parent which applies new styles to itself and its child. */

a.link:active {
    display: none;
}

.listitem:active {
    background-color: blue;
}

.listitem:active a.link {
    display: inline-block;
    background-color: transparent;
}

您应该会看到带有绿色背景的链接现在在单击时变为列表项的蓝色背景。

https://i.stack.imgur.com/2MTVy.png

转向

https://i.stack.imgur.com/aRVcH.png

点击。

---

由于“CSS 工作组之前拒绝父选择器提案的主要原因与浏览器性能和增量渲染问题有关”，因此没有 css（因此在 css 预处理器中）父选择器。

---