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

然而，你也可以这样做。

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

jQuery

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

如果您想使用jQuery实现这一点，这里是jQuery父选择器的引用。

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

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

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

试试这个。。。

此解决方案使用无Javascript的简单CSS2规则，适用于所有浏览器，无论新旧浏览器。单击时，子锚点标记将激活其活动的伪类事件。然后，它简单地隐藏自己，允许活动事件向上冒泡到父li标签，然后父li标签重新设计自己的样式，并以新样式再次显示其锚定子对象。子对象已设置父对象的样式。

使用您的示例：

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

现在，将这些样式应用于a上的活动伪类，以在单击链接时重新设置父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;
}

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

转到

单击。

基于子元素更改父元素当前只能在父元素中有＜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>

我会雇佣一些JavaScript代码来实现这一点。例如，在React中，当您遍历数组时，向父组件添加另一个类，这表明它包含您的子组件：

<div className={`parent ${hasKiddos ? 'has-kiddos' : ''}`}>
    {kiddos.map(kid => <div key={kid.id} />)}
</div>

然后简单地：

.parent {
    color: #000;
}

.parent.has-kiddos {
    color: red;
}