Question

我有一个ul列表，li有一个特定的类。我想更改ul的背景颜色。

例如：

<ul class="dropdown-menu">
    <li class="">About us</li>
    <li class="">Why Join?</li>
    <li class="">Constitution</li>

</ul>
<ul class="dropdown-menu">
    <li class="active">2016 Conference</li>
    <li class="">Member Home Page</li>
    <li class="">Bulletin Board</li>
</ul>

我想更改第二个ul背景颜色。

我尝试过以下代码

ul.dropdown-menu li.active {
    background-color: #e9124a !important;
}

Answer 1

看看这个......

我认为没有Javascript的帮助你就无法做到这一点

document.getElementsByClassName('active')[0].parentElement.style.background = '#e9124a';

<ul class="dropdown-menu">
  <li class="">About us</li>
  <li class="">Why Join?</li>
  <li class="">Constitution</li>

</ul>
<ul class="dropdown-menu">
  <li class="active">2016 Conference</li>
  <li class="">Member Home Page</li>
  <li class="">Bulletin Board</li>
</ul>

Answer 2

如果您想选择第二个ul元素：

＆＃13;

.dropdown-menu:nth-child(2) {
  background-color: #F0D0D0;
  }

＆＃13;

<ul class="dropdown-menu">
    <li class="">About us</li>
    <li class="">Why Join?</li>
    <li class="">Constitution</li>

</ul>
<ul class="dropdown-menu">
    <li class="active">2016 Conference</li>
    <li class="">Member Home Page</li>
    <li class="">Bulletin Board</li>
</ul>

＆＃13;

如果你想选择包含li类active的所有ul，据我所知，仅使用CSS是不可能的。

Answer 3

使用CSS（级联样式表），您只能从HTML结构的TOP到BOTTOM中进行选择。不是另一种方式。所以你可以根据它的孩子选择一个元素。

您可以使用下面的简单jQuery参见代码段

来完成此操作

＆＃13;

$("ul").has("li.active").css("background-color","#e9124a ")

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="dropdown-menu">
    <li class="">About us</li>
    <li class="">Why Join?</li>
    <li class="">Constitution</li>

</ul>
<ul class="dropdown-menu">
    <li class="active">2016 Conference</li>
    <li class="">Member Home Page</li>
    <li class="">Bulletin Board</li>
</ul>

＆＃13;

Answer 4

请参阅此问题here

目前无法在CSS中选择元素的父级。与此同时，如果您需要选择父元素，则必须使用JavaScript。

Answer 5

你可以为第二个ul添加一个新类。例如

<ul class="dropdown-menu">
    <li class="">About us</li>
    <li class="">Why Join?</li>
    <li class="">Constitution</li>

</ul>
<ul class="dropdown-menu new-color">
    <li class="active">2016 Conference</li>
    <li class="">Member Home Page</li>
    <li class="">Bulletin Board</li>
</ul>

ul.dropdown-menu li.active {
    background-color: #e9124a !important;
}

//setting the color of the second ul
.new-color {
    background-color: #c6ffb3 !important;
}

更改其li具有特定类

5 个答案: