在CSS中为子元素的父元素设置样式

Question

如果你能在这件事上提供任何帮助，我将不胜感激。我正在尝试设置特定子元素的父元素的样式。

由于技术上的限制，这在CSS中似乎是不可能的，但我想知道在JavaScript中是否有可用的解决方案可以实现这一点？

我正在尝试修改<ul class="children">子元素的父<a>元素，仅当该<a>元素具有class="active"时。例如，将会有其他包含非活动<ul>子元素的<a>元素，我不希望设置这些元素的样式。

如果您知道任何能够实现这一点的解决方案，将不胜感激！虽然我对CSS很熟悉，但我在JavaScript方面还不够胜任，无法自己写这篇文章。

<ul class="menu">  
    <li>  
        <a class="active">Active Page</a>
        <ul class="children">
            <a>Something here </a>
        </ul>
    </li>  
    <li>    
        <a>Some Other Page</a>  
        <ul class="children">
            <a>Something here</a>
        </ul>
    </li>  
</ul>

Answer 1

我建议你设计a.active的风格。(或者我还没有理解这个问题？)

也就是说。

a.active {
  background-color: pink;
}

Answer 2

没有用于选择父元素的css选择器。您还应该给父元素一个选择器，您可以使用它来样式化它。

另请参阅Is there a CSS parent selector?，了解有关父选择器主题的更多信息。

Answer 3

我真的被你的问题搞糊涂了，但是你可以给同一个元素两个类名。就像

<ul class="children">

您可以将其命名为：

<ul class="children active">