时间戳

首页 > 解决方案 > ul和li下如何访问div类

html - ul和li下如何访问div类

问题描述

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

标签： htmlcsscss-selectors

解决方案

您可以使用以下选择器：

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

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

推荐阅读