1

我非常感谢您在这件事上提供的任何帮助。我正在尝试为特定子元素的父元素设置样式。

由于技术限制，这似乎在 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>
4

7 回答 7

1

我建议你风格 a.active。（或者我没有理解这个问题？）

IE

a.active {
  background-color: pink;
}
于 2013-02-14T11:22:59.643 回答
0

没有用于选择父元素的 CSS 选择器。您还应该为父元素提供一个选择器，您可以使用它来设置它的样式。

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

于 2013-02-14T11:23:49.537 回答
0

我真的对你的问题感到困惑，但你可以给同一个元素两个类名。就像对于 

<ul class="children">

您可以将其命名为：

<ul class="children active">
于 2013-02-14T11:26:56.747 回答
0

可能你想要这个：

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

看：

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

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

于 2013-02-14T11:27:32.863 回答
0

为什么你不能为班级活动做一个风格？

.active { 
    background-color: red;
}

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

于 2013-02-14T11:28:09.517 回答
0

对不起，我读了一遍又一遍，现在我明白了！

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

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

希望能帮助到你！

于 2013-02-14T12:20:33.413 回答
0

您的 HTML 嵌套标签没问题。不需要 javascript 你的 css 规则应该是这样的

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

（为了在其兄弟是活动的类时设置 UL 类子项的样式

于 2013-02-14T11:31:47.850 回答