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

Question

您在此问题上可以提供的任何帮助，我将非常感谢。 我正在尝试设置特定子元素的父样式。

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

我试图更改<ul class="children">子元素的父<a>元素，仅当该<a>元素具有class="active" 。 例如，会有其他<a>元素和<ul>子元素处于活动状态，我不想对其进行样式设置。

如果您知道任何能够实现这一目标的解决方案，将不胜感激！ 虽然我熟悉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选择器来选择父元素。 您还应该给父元素一个选择器，您可以使用该选择器设置其样式。

另请参阅是否有CSS父选择器？ 有关父选择器主题的更多信息。

Answer 3

我真的对您的问题感到困惑，但是您可以为同一个元素指定两个类名。 喜欢的

<ul class="children">

您可以将其命名为：

<ul class="children active">

Answer 4

可能是您想要这样：

if($('ul.children a').hasClass('active')){
  $('ul.children').sibling('a').addClass('active');
}

看到：

我正在trying to alter the parent <a> of a <ul class="children"> trying to alter the parent <a>元素

虽然这不是真的，但<a>是您的情况下的兄弟姐妹。

Answer 5

您为什么不能为活动班级设置样式？

.active { 
    background-color: red;
}

根据您的HTML，您可以设置确切的父元素样式。

Answer 6

您的HTML嵌套标签还可以。 无需javascript您的CSS规则应如下所示

a.active+ul.children { ...what ever .... }

（为了在同级学生处于活动状态时为UL级孩子设置样式

Answer 7

抱歉，我读了一遍又一遍，现在我明白了！

.menu>li>a.active{
  font-weight:bold
}

它将仅从“ .menu”;）的第一级“ li”子级中选择第一级“ a.active”子级。

希望能帮助到你！