见

Question

我真的很感激你能提供的任何帮助。我正在尝试设置特定子元素的父级。

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

我正在尝试更改<a>子元素的父<ul class="children">元素，仅当该<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选择器可以选择父元素。您还应该为父元素提供一个可用于设置样式的选择器。

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

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">

虽然事实并非如此，<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”儿童;）

希望它有所帮助！

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

7 个答案:

见