有 CSS 父选择器吗？

Posted 2023-03-06

【中文标题】有 CSS 父选择器吗？

【英文标题】：Is there a CSS parent selector?

【发布时间】：2010-11-04 03:09:59

【问题描述】：

如何选择作为锚元素的直接父元素的<li> 元素？

例如，我的 CSS 是这样的：

li < a.active 
    property: value;

显然有一些使用 javascript 的方法，但我希望有某种解决方法存在于 CSS 级别 2 中。

我试图设置样式的菜单被 CMS 吐出，所以我无法将活动元素移动到 <li> 元素...（除非我为菜单创建模块设置主题，我宁愿不）。

有什么想法吗？

【问题讨论】：

Safari Tech Preview 137 今天介绍了:has() 选择器的第一个实现。

即将推出：chrome!

【参考方案1】：

目前无法在 CSS 中选择元素的父级。

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

Selectors Level 3 Spec CSS 2.1 Selectors Spec

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

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

但是，从 2021 年开始，this is still not supported by any browser。

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

【讨论】：

好像已经被建议拒绝了：***.com/questions/45004/…

看起来subject selector 已被重新访问，除了现在使用!：The subject of the selector can be explicitly identified by appending an exclamation mark (!) to one of the compound selectors in a selector.

前面的$ 对我来说看起来更好...后面的! 可以更容易地被忽略。

情节重大转折！选择器 4 WD 刚刚更新 today 以从快速配置文件中排除主题指示符，这将由 CSS 实现使用。如果此更改仍然存在，则意味着您将无法再在样式表中使用主题指示符（除非您使用添加某种类型的 polyfill，如 another answer 中描述的那样） - 您只能将其与 Selectors API 和可以实现完整配置文件的任何其他地方。

另一个重大更新：看起来他们正在考虑完全取消主题选择器语法，并用每个人都从 jQuery 开始了解和喜爱的 :has() 伪代码替换它。最新的 ED 删除了对主题指示符的所有引用，并将其替换为 :has() 伪。我不知道确切的原因，但 CSSWG 前段时间举行了一次民意调查，结果一定影响了这个决定。它最有可能与 jQuery 兼容（因此它可以在不修改的情况下利用 qSA），并且因为主题指示符语法被证明过于混乱。

【参考方案2】：

是的：:has()

浏览器支持：none

【讨论】：

正如@Rodolfo Jorge Nemer Nogueira 指出的那样，使用 & 符号可以使用 sass (scss)。然后将其编译为所需的 css。如果支持下一个 css 版本就好了&

其实我觉得有experimental syntax相当于Andrew的说法：@supports selector(:has(a))

【参考方案3】：

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

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

【讨论】：

您不能将伪选择器转移到列表项，因为它不是可聚焦的元素。他正在使用 :active 选择器，因此当锚处于活动状态时，他希望列表项受到影响。列表项永远不会处于活动状态。顺便说一句，不幸的是这样的选择器不存在。没有它，让一个纯 CSS 菜单完全可以通过键盘访问似乎是不可能的（使用同级选择器，您可以使使用嵌套列表创建的子菜单出现，但是一旦列表获得焦点，它就会再次隐藏）。如果这个特定的 conun 有任何纯 CSS 的解决方案

@Dominic Aquilina 看问题，OP使用的是类，不是伪选择器。

【参考方案4】：

你可以使用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 中使用。

【讨论】：

假设使用 jquery patent() 会更快。然而，这需要测试

@Idered 当你有一个没有子选择器的选择器主题的 CSS 声明时它会失败（#a! 单独抛出一个错误，#a! p 有效），所以其他的也不会因为Uncaught TypeError: Cannot call method 'split' of undefined：见jsfiddle.net/HerrSerker/VkVPs

@HerrSerker 我想#a！是一个无效的选择器，它应该选择什么？

@Idered 我不知道。规范并没有说这是非法的。 ＃一种！应该选择自己。至少它们在 JavaScript 中应该没有错误

根据我对已接受答案的评论，看起来即使在不久的将来也可能需要 polyfill，因为浏览器可能永远不会在 CSS 中实现主题指示符。

【参考方案5】：

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

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

【讨论】：

< 选择器不存在（使用 jQuery 1.7.1 验证）。

也许 <-syntax 在 2009 年有效，但我已经更新了它（2013 年）。

更好的是，使用jQuery内置的:has() selector:$("li:has(a.active)").css("property", "value");。它读起来类似于 CSS 4 提出的 ! 选择器。另见：:parent selector、.parents() method、.parent() method。

而不是使用.css("property", "value") 来设置所选元素的样式，您通常应该使用.addClass("someClass") 并在您的CSS 中添加.someClass property: value (via)。这样，您可以使用 CSS 和您正在使用的任何预处理器的全部功能来标记样式。

【参考方案6】：

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

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

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

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

【讨论】：

所以让浏览器更快。互联网本身更快。这个选择器是绝对需要的，遗憾的是，我们没有实现它的原因是因为我们生活在一个缓慢而原始的世界中。

实际上，选择器会让一个非常快的浏览器看起来很慢。

我相信浏览器开发者会想出一个（至少）与 javascript 版本一样快的实现，这是人们最终使用的版本。

@Marc.2377 如果你在你的网站上尝试上面的 JS 示例，我永远不会去访问它。另一方面，我想说大多数时候，你只关心直系子女，所以如果只限于直系子女，那将是一个很好的补充，没有太大的影响。

【参考方案7】：

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

li.active > a 
    property: value;

【讨论】：

通过使 a 元素 display:block 您可以设置其样式以适应整个 li 区域。如果你能解释一下你在寻找什么风格，也许我可以提供一个解决方案。

这实际上是一个简单而优雅的解决方案，在许多情况下，将类设置在父级上是有意义的。

【参考方案8】：

伪元素:focus-within 允许在子代有焦点时选择父代。

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

Browser support for focus-within

Tabindex

示例

.parent:focus-within 
  background: hsl(199deg, 65%, 73%);


/* demo styles */
body 
  margin: 0;

.parent 
  background: hsl(0, 0%, 80%);
  min-height: 100vh;
  display: grid;
  place-content: center;

.child 
  background: hsl(0, 0%, 0%);
  color: white;
  padding: 3rem;
  outline: 0;
  cursor: pointer;
  font: 18px/1.25 sans-serif;
  width: 20ch;

<div class="parent">
  <div class="child" tabindex="1">
    Click or Focus on me, my parent will change.
  </div>
</div>

【讨论】：

这对我来说很好用，谢谢！只是一个不，如果您将颜色更改为父级而不是兄弟级，则该示例将更具说明性，这是将.color:focus-within .change替换为.color:focus-within。在我的情况下，我使用引导导航栏，在活动时将类添加到子级，我想向父级.nav-bar 添加一个类。我认为这是一个非常常见的场景，我拥有标记，但组件 css+js 是引导程序（或其他），因此我无法更改行为。虽然我可以添加 tabindex 并使用这个 css。谢谢！

【参考方案9】：

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

li 
  padding: 0;
  overflow: hidden;

a 
  display: block;
  width: 100%;
  color: ..., background: ..., border-radius: ..., etc...

a.active 
  color: ..., background: ...

【参考方案10】：

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

E ~ F 
    property: value;

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

【参考方案11】：

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

【参考方案12】：

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

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

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

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

【讨论】：

或者使用$yourSpan.closest("ul")，你会得到你的span元素的父UL。不过，您的回答完全是题外话。我们可以使用 jQuery 解决方案回答所有带有 CSS 标记的问题。

正如其他答案中所确定的，没有办法使用 CSS 2 来做到这一点。鉴于这种限制，我提供的答案是我知道有效的答案，并且是使用 javascript 回答问题的最简单方法恕我直言。

鉴于您的支持，有些人同意您的看法。但唯一的答案仍然是公认的答案；简单明了“它不能按照你想要的方式完成”。如果问题是如何在自行车上达到 60 英里/小时，而您的回答是“简单；上车加油。”，这仍然不是答案。因此我的评论。

这种方法会使 SO 几乎完全没用。我搜索如何解决问题，而不是找到“唯一答案”并不能解决问题。这就是 SO 如此棒的原因，因为给猫剥皮的方法总是不止一种。

【参考方案13】：

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

例如：

body! a:hover
   background: red;

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

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

【参考方案14】：

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

a.active h1 color:red;

a.active:hover h1 color:green;

a.active h2 color:blue;

a.active:hover h1 color:yellow;

这样你可以改变多个内部标签的样式，基于父元素的翻转。

【讨论】：

这是正确的，但如果您想符合 XHTML 标准，则将 a 标记内的标记代码限制为仅限某些元素。例如，您不能在a 中使用div，而不会收到违反架构的警告。

完全正确，伊瓦伊洛！ “a”是非块元素，所以不能在里面使用块元素。

在 HTML5 中，将块元素放在链接中是非常好的。

...如果它在语义上是错误的，他们不会在 HTML5 中允许它在以前没有的地方。

【参考方案15】：

这是一个使用pointer-events 和hover 的hack：

<!doctype html>
<html>
    <head>
        <title></title>
        <style>
/* accessory */
.parent 
    width: 200px;
    height: 200px;
    background: gray;

.parent, 
.selector 
    display: flex;
    justify-content: center;
    align-items: center;

.selector 
    cursor: pointer;
    background: silver;
    width: 50%;
    height: 50%;

        </style>
        <style>
/* pertinent */
.parent 
    background: gray;
    pointer-events: none;

.parent:hover 
    background: fuchsia;

.parent 
.selector 
    pointer-events: auto;

        </style>
    </head>
    <body>
        <div class="parent">
            <div class="selector"></div>
        </div>
    </body>
</html>

【参考方案16】：

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

部分 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 的哪些部分正在做什么。你能补充一个详尽的解释吗？

我没有尝试将其应用于现实世界的场景，这就是为什么我说“不适用于生产”。但我认为它只能应用于具有固定项目宽度的 2 级菜单。 “这个 CSS 的哪些部分在做什么” - 这里的 .test-sibling 实际上是父项的背景（CSS 的最后一行）。

添加了解释（jsfiddle的css部分，从“MAIN PART”开始）......我弄错了 - 可能有任意数量的子级别。

【参考方案17】：

目前没有父选择器，甚至在 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。

这些人都是前端开发领域的佼佼者。

【讨论】：

need是根据web开发者的需求定义的，是否在规范中是由其他因素决定的。

【参考方案18】：

有一个插件可以扩展 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 仅用于与元素查询匹配的元素，等等。

【参考方案19】：

现在是 2019 年，latest draft of the CSS Nesting Module 实际上有这样的东西。介绍@nest at-rules。

3.2。嵌套规则：@nest

虽然直接嵌套看起来不错，但它有点脆弱。不允许使用某些有效的嵌套选择器，例如 .foo &，并且以某些方式编辑选择器可能会使规则意外无效。此外，有些人发现嵌套很难从视觉上与周围的声明区分开来。

为了帮助解决所有这些问题，本规范定义了@nest 规则，它对如何有效嵌套样式规则施加的限制较少。它的语法是：

@nest = @nest <selector> <declaration-list>

@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; 
 */

【参考方案20】：

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

【讨论】：

错误。因为 DOM 是一棵树，它们必须在到达子节点之前先到达父节点，所以只需返回一个节点即可。 o.o

CSS 选择器是一个queue，所以评估selector order 而不是文档XPath 或DOM 层次结构。

@rgb 至少他们是这么告诉我们的。

【参考方案21】：

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

不过，您也可以这样做。

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

jQuery

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

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

【参考方案22】：

简短的回答是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;

【讨论】：

或parentElement，sameshing - 只是document.getElementById().parentElement等

【参考方案23】：

虽然目前标准 CSS 中没有父选择器，但我正在开发一个名为 axe 的（个人）项目（即 Augmented CSS Selector Syntax / ACSSSS）其中，在它的 7 个新选择器中，包括以下两者：

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

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

在此处查看演示：

.parent 
  float: left;
  width: 180px;
  height: 180px;
  margin-right: 12px;
  background-color: rgb(191, 191, 191);


.child 
  width: 90px;
  height: 90px;
  margin: 45px;
  padding-top: 12px;
  font-family: sans-serif;
  text-align: center;
  font-size: 12px;
  background-color: rgb(255, 255, 0);


.child.using-axe < .parent 
  background-color: rgb(255, 0, 0);

<div class="parent">
  <div class="child"></div>
</div>

<div class="parent">
  <div class="child using-axe">Here, the axe parent selector turns the outer square red.</div>
</div>


<script src="https://rouninmedia.github.io/axe/axe.js"></script>

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

.child.using-axe < .parent

意思是：

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

您也可以使用：

.child.using-axe < div

这意味着：

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

【讨论】：

该项目目前处于早期Beta阶段。您可以（至少目前）在您的 CSS 样式中激活 ax 选择器，方法是在您的 html 文档的最末尾添加 <script src="https://rouninmedia.github.io/axe/axe.js"></script>，就在 </body> 之前。

【参考方案24】：

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

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

<div>Peter</div>
<div><a href="#">Jackson link</a></div>
<div>Philip</div>
<div><a href="#">Pullman link</a></div>

【参考方案25】：

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

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

【参考方案26】：

有什么想法吗？

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

/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden 
  display: none;
  visibility: hidden;
  opacity: 0;
  filter: alpha(opacity=0); /* Old Microsoft opacity */



/* Base style for content and style menu */
.main__content 
  background-color: lightgray;
  color: black;


.menu__hidden 
  background-color: black;
  color: lightgray;
  /* Make list look not so _listy_ */
  list-style: none;
  padding-left: 5px;


.menu__option 
  box-sizing: content-box;
  display: block;
  position: static;
  z-index: auto;


/* ▼ - \u2630 - Three Bars */
/*
.menu__trigger__selection::before 
  content: '\2630';
  display: inline-block;

*/

/* ▼ - Down Arrow */
.menu__trigger__selection::after 
  content: "\25BC";
  display: inline-block;
  transform: rotate(90deg);



/* Customize to look more `select` like if you like */
.menu__trigger__style:hover,
.menu__trigger__style:active 
  cursor: pointer;
  background-color: darkgray;
  color: white;



/**
 * Things to do when checkboxes/radios are checked
 */

.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after 
  transform: rotate(0deg);


/* This bit is something that you may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden 
  display: block;
  visibility: visible;
  opacity: 1;
  filter: alpha(opacity=100); /* Microsoft!? */



/**
 * Hacky CSS only changes based off non-inline checkboxes
 * ... AKA the stuff you cannot unsee after this...
 */
.menu__checkbox__style[id="style-default"]:checked ~ .main__content 
  background-color: lightgray;
  color: black;


.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 
  background-color: black;
  color: lightgray;


.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;
  color: red;


.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] 
  color: darkorange;

<!--
  This bit works, but will one day cause troubles,
  but truth is you can stick checkbox/radio inputs
  just about anywhere and then call them by id with
  a `for` label. Keep scrolling to see what I mean
-->
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-default">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-one">
<input type="radio"
       name="colorize"
       class="menu__checkbox__style"
       id="style-two">


<div class="main__content">

  <p class="paragraph__split">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  </p>

  <input type="checkbox"
         class="menu__checkbox__selection"
         id="trigger-style-menu">
  <label for="trigger-style-menu"
         class="menu__trigger__selection"> Theme</label>

  <ul class="menu__hidden">
    <li class="menu__option">
      <label for="style-default"
             class="menu__trigger__style">Default Style</label>
    </li>

    <li class="menu__option">
      <label for="style-one"
             class="menu__trigger__style">First Alternative Style</label>
    </li>

    <li class="menu__option">
      <label for="style-two"
             class="menu__trigger__style">Second Alternative Style</label>
    </li>
  </ul>

  <p class="paragraph__split">
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>

</div>

...漂亮粗，但仅使用 CSS 和 HTML 就可以通过链接 @987654331 从任何地方触摸和重新触摸除 body 和 :root 之外的任何东西@ 和 for 的属性 radio/checkbox inputs 和 label 触发器;可能有人会在某个时候展示如何重新触摸它们。

另外需要注意的是，只有 一个 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 版本中。

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

【讨论】：

从未有过“CSS4”的计划，甚至在 2019 年之前 CSS3 也已合并为“CSS”。

Tyler CSS4 正在被那些维护规范的人考虑。公告链接→w3.org/community/css4讨论链接→github.com/w3c/csswg-drafts/issues/4770

这只是一个讨论组的名称。不会有称为 CSS4 的技术。 CSS 模块是独立版本的，并且已经有很多年了。由于该随机用户的 GitHub 请求中的实际 CSSWG 贡献者已经回复了and wrote a response about，这不是一个好主意。此外，该请求已经失效了一年多（您可以看到 GH w3c 帐户一直在删除最近试图破坏它的宣传 cmets）。

那篇文章是一种平和的观点，总体上分散了规范讨论线程的注意力。少数标记为偏离主题的 cmets 和一个已删除的评论并没有意图necro，如果工作组致力于终止 CSS4 讨论，我希望该问题被标记为已关闭。没关系，在大型项目中是一件好事，模块是独立版本的；模块版本与规范版本不冲突。

这是 CSSWG 的一位贡献成员根据她在 GitHub 请求中的“否”响应推断出的一篇观点文章，该请求中的语言已停用一年多。可以肯定地说它没有被推进。模块版本 会 与规范版本控制严重冲突，因为线程中的几个 cmets 突出显示。听着，尽管您希望它成为一件事，但事实并非如此。重要的是要接受这一点，不要因提及不存在的事物而使读者感到困惑。

【参考方案27】：

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

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

.outer-div 
  width: 400px;
  height: 400px;
  padding: 50px;
  float: left


.outer-div:focus-within 
  background: red;


.inner-div 
  width: 200px;
  height: 200px;
  float: left;
  background: yellow;
  padding: 50px;

<div class="outer-div">
  <div class="inner-div">
    I want to change outer-div(Background color) class based on inner-div. Is it possible?
    <input type="text" placeholder="Name" />
  </div>
</div>

【讨论】：

The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. 每个元素都有works，而不仅仅是input

【参考方案28】：

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

【参考方案29】：

试试这个...

此解决方案使用无 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;

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

转向

点击。

【参考方案30】：

父选择器又名 has-selector 终于登陆 Safari TP 137。虽然工作正在 Chrome 中实施。 (MDN Documentation)

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

其他例子：

选择元素的直接父级

<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 以了解浏览器兼容性。