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

例如：

body! a:hover{
   background: red;
}

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

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

基于子元素更改父元素当前只能在父元素中有＜input＞元素时发生。当输入获得焦点时，其对应的父元素可能会使用CSS受到影响。

以下示例将帮助您理解在CSS中使用：focus in。

.外部div{宽度：400px；高度：400px；填充：50px；浮动：左侧}.outer div：聚焦在{背景：红色；}.内部div{宽度：200px；高度：200px；浮动：左侧；背景：黄色；填充：50px；}<div class=“outer div”><div class=“inner div”>我想根据inner-div更改外部div（背景色）类。有可能吗？<input type=“text”placeholder=“Name”/></div></div>

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

li.active > a {
    property: value;
}

这是对一个类似（但我感觉不是完全相同）问题的回答，该问题已被关闭，支持这个问题，所以我在这里回答了如何在检查输入时更改边框颜色。

由于不可能使用纯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>

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

a.active h1 {color:red;}

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

a.active h2 {color:blue;}

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

这样，您可以根据父元素的滚动来更改多个内部标记中的样式。

有什么想法吗？

如果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版本中。

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