如何访问ul和li下的div类

Question

如何访问ul-li下的div类来分配css样式。这里我想更改媒体查询下的下拉元素样式，如何访问下拉元素。

下面是我的代码。

<ul class="nav" id="topnav">
<li><a href="#" class="active" >item1</a></li>
<li><a href="#">item2</a></li>
<li>
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#">sub item1</a>
<a href="#">sub item2</a>
<a href="#">sub item3</a>
</div>
</div>
</li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
</ul>

Answer 1

您可以使用以下选择器：

ul > li .dropdown{
/*Style*/
}

它选择作为ul的后代的<li>，然后选择.dropdown。

代码段：

ul > li .dropdown{
background-color:red;
}

<ul class="nav" id="topnav">
<li><a href="#" class="active" >item1</a></li>
<li><a href="#">item2</a></li>
<li>
<div class="dropdown">
<button class="dropbtn">Services
<i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a href="#">sub item1</a>
<a href="#">sub item2</a>
<a href="#">sub item3</a>
</div>
</div>
</li>
<li><a href="#">item3</a></li>
<li><a href="#">item4</a></li>
</ul>

Answer 2

最简单的方法是直接使用类进行操作。

.dropdown{
color: red;
}

第二个选项是使用类似css的子体选择器。

ul > li .dropdown{
color: red;
}

这里有一篇关于大量css选择器的非常好的文章css选择器

Answer 3

在这种特殊情况下，100%可靠的方法是使用ul#topnav > li > .dropdown作为选择器-这也使用顶级ul的ID，并且只影响具有.dropdown类的第一级列表项的直接子项。