ul和li下如何访问div类答案

【问题标题】：How to access div class under ul and liul和li下如何访问div类
【发布时间】：2021-07-21 17:26:55
【问题描述】：

如何访问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>

【问题讨论】：

ul li .dropdown?

标签： html css css-selectors

【解决方案1】：

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

【讨论】：

【解决方案2】：

最简单的方法是直接用类来操作。

.dropdown{
  color: red;
}

第二种选择是使用css之类的后代选择器。

ul > li .dropdown{
  color: red;
}

这是一篇关于大量 css 选择器的非常好的文章css-selectors

【讨论】：

【解决方案3】：

您可以使用以下选择器：

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

它选择作为 ul 后代的 <li>s，然后选择 .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>

【讨论】：