Question

尝试用CSS选择相邻的子元素...不确定如何这是HTML结构

<ul>
    <li>
        <a href="#">
            <span class="icon"></span>
            First level
        </a>
        <ul>
            <li>
                <a href="#">Second level</a>
            </li>
        </ul>
    </li>
</ul>

我想说有一个包含多个级别的菜单。如果在LI中存在UL，那么需要有一个下拉/展开图标...所以我想如果我使用相邻的选择器我可以确定这个级别是否有孩子扩展这是我认为会起作用但是没有“T：

ul li a ~ ul .icon {
    // doesnt work
}
ul li a .icon ~ ul {
    // doesnt work
}

这有效，但我需要定位.icon

ul li a ~ ul {
    // works
}

干杯，Dom

Answer 1

以我对你的问题的评论为基础。如果您可以控制如何生成菜单的HTML，则解决方法是为每个具有子菜单的li元素添加一个额外的类。像这样：

<ul>
    <li class="has-submenu">
        <a href="#">
            <span class="icon"></span>
            First level
        </a>
        <ul>
            <li>
                <a href="#">Second level</a>
            </li>
        </ul>
    </li>
</ul>

然后你可以使用这样的选择器：

.has-submenu .icon {
    /* Do your stuff here */
}

Answer 2

ul是li的孩子，而不是锚。所以ul li ul。
如果您想将其选为兄弟姐妹，请ul li a + ul

选择邻居的孩子......怎么样？

2 个答案: