更新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根据父级的状态来设置父级的样式，因此此代码段会更改HTML，以便在输入元素后面紧跟一个空span元素。此span元素不执行任何操作，直到输入悬停在其显示自身的位置，并展开以适应与已设置位置的祖先相同的大小。这是标签本身，而不是输入。因此，边框（阴影）看起来就像是在标签上。

* {边距：0；填充：0；框大小调整：边框框；}.外部字段{显示：柔性；}.list标签{填充：8px 5px；边框：2px实心黑色；宽度：32%；保证金：1%；显示：柔性；调整内容：间距；对齐项目：居中；柔性流：行；位置：相对；}输入[type=“radio”]~span{显示：无；}input[type=“radio”]：选中/span{显示：内联块；宽度：100%；高度：100%；边框：2px纯红色；方框阴影：0 0 0 3px橙色；位置：绝对；顶部：0；左：0；}<div class=“OuterField”><label for=“List1”class=“listLabel”>列表1<input type=“radio”id=“List1”name=“list”value=“List1“><span></span></label><label for=“List2”class=“listLabel”>列表2<input type=“radio”id=“List2”name=“list”value=“List2“><span></span></label></div>

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

有什么想法吗？

如果CSS4在向后行走时添加了一些钩子，那么它会很漂亮。在此之前，可以使用复选框和/或无线电输入来打破通常的连接方式，并且通过这种方式也允许CSS在其正常范围之外运行。。。

/*隐藏可能稍后显示的内容*/菜单_复选框_选择，.menu__checkbox _样式，.menu__隐藏{显示：无；可见性：隐藏；不透明度：0；过滤器：alpha（不透明度=0）；/*旧Microsoft不透明度*/}/*内容和样式菜单的基本样式*/.main__内容{背景色：浅灰色；颜色：黑色；}.menu__隐藏{背景色：黑色；颜色：浅灰色；/*使列表看起来不是这样_listy_*/列表样式：无；左侧填充：5px；}.menu__选项{框大小：内容框；显示：块；位置：静态；z索引：自动；}/* &#9660; - \u2630-三条线*//*.menu__trigger__selection:：之前{内容：'\2630'；显示：内联块；}*//* &#9660; - 向下箭头*/.menu__trigger__selection:：之后{内容：“\25BC”；显示：内联块；变换：旋转（90度）；}/*自定义以使其看起来更像“选择”（如果愿意）*/.menu__trigger__style:悬停，.menu__trigger__style:活动{光标：指针；背景色：深灰色；颜色：白色；}/***选中复选框/收音机时要做的事情*/.menu__checkbox_selection:选中+.menu__trigger__selection:：之后，.menu__checkbox_selection[checked]+.menu__trigger__selection:：之后{变换：旋转（0deg）；}/*这一点你可以在其他地方看到*/.menu__checkbox_selection:选中~.menu__hidden，.menu__checkbox_selection[checked]~.menu__hidden{显示：块；可见性：可见；不透明度：1；过滤器：alpha（不透明度=100）；/*Microsoft*/}/***仅基于非内联复选框的黑客CSS更改* ... AKA这之后你不能解开的东西。。。*/.menu__checkboxx_style[id=“style default”]：选中~.main__content{背景色：浅灰色；颜色：黑色；}.menu__checkboxx_style[id=“style default”]：选中~.main__content.menu__trigger__style[for=“style default”]{颜色：深橙色；}.menu__checkboxx_style[id=“style one”]：选中~.main__content{背景色：黑色；颜色：浅灰色；}.menu__checkboxx_style[id=“style one”]：选中~.main__content.menu__trigger__style[for=“style one”]{颜色：深橙色；}.menu__checkboxx_style[id=“style two”]：选中~.main__content{背景色：深绿色；颜色：红色；}.menu__checkboxx_style[id=“style two”]：选中~.main__content.menu__trigger__style[for=“style二”]{颜色：深橙色；}<!--这一点可行，但总有一天会带来麻烦，但事实是，你可以粘贴复选框/无线电输入随便找个地方，然后用身份证给他们打电话“for”标签。继续滚动查看我的意思--><输入类型=“收音机”name=“上色”class=“menu__checkbox_style”id=“style default”><输入类型=“收音机”name=“上色”class=“menu__checkbox_style”id=“style one”><输入类型=“收音机”name=“上色”class=“menu__checkbox_style”id=“style two”><div class=“main__content”><p class=“paragraph__split”>Lorem ipsum dolor坐amet，consectetur adipiscing elit，sed do eiusmod暂时停止劳动和劳动。乌特海姆和最小的威尼斯，quis nostrud exerciation ullamco labours nisi ut aliquip ex ea commo</p><input-type=“checkbox”class=“menu__checkbox_selection”id=“触发器样式菜单”><label for=“触发器样式菜单”class=“menu__trigger__selection”>主题</label><ul class=“menu__hidden”><li class=“menu__option”><label for=“style default”class=“menu__trigger__style”>默认样式</label></li><li class=“menu__option”><label for=“style one”class=“menu__trigger__style”>第一替代样式</label></li><li class=“menu__option”><label for=“style two”class=“menu__trigger__style”>第二种可选样式</label></li></ul><p class=“paragraph__split”>金桔。我是一个很好的朋友cillum dolore eu fugiat nulla pariator。偶尔会发生意外proident，sunt in guma qui official disestant mollit anim is laburum。</p></div>

……相当粗鲁，但仅使用CSS和HTML，就可以通过链接id和radio/checkbox输入和标签触发器的财产，从几乎任何地方接触和重新接触任何东西，除了正文和：root；很可能有人会在某个时候展示如何重新触摸这些。

一个额外的警告是，只能使用特定id的一个输入，第一个复选框/单选框将赢得切换状态，换句话说。。。但是多个标签都可以指向同一个输入，尽管这会使HTML和CSS看起来更恶心。

…我希望有某种变通方法可以在CSS Level 2中使用。。。

我不确定其他伪类，但我检查了CSS3之前的版本。如果我没记错的话，它类似于[checked]，这就是为什么你可以在上面的代码中找到它，例如，

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

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

所有这些都表明，请不要在生产中使用，甚至不要在愤怒中使用。作为一个玩笑，或者换句话说，仅仅因为某件事可以做，并不总是意味着它应该做。

CSS父选择器（也称为：has（）选择器）终于在Safari TP 137中落地。该功能目前也在Chrome中实现。（MDN文档）

父级选择是通过伪类：has（）完成的。例如，div:hhas（>.child）将选择具有子类的子级的所有＜div＞元素。

其他示例：

选择元素的直接父级

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

div:has(> p)

选择元素的所有父级

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

以下选择器将同时选择祖父母和父母

div:has(.child)

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

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

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

密切关注caniuse.com/css-has的浏览器兼容性。

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

例如：

body! a:hover{
   background: red;
}

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

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