html - 使用 CSS 检测 child 是否存在

Question

我有以下菜单，当我使用下面的 CSS 时，它下面会出现一个小箭头，但我只希望箭头出现 if li 有一个 .subnav 存在

CSS

.nav li: hover {
    background: url(.. / img / template / nav - hover.png) no - repeat bottom center;
}

HTML

<div class="nav">
    <ul>
        <li><a href="#">Services</a>

            <div class="subnav">
                <ul>
                    <li><a href="#">menu item</a>
                    </li>
                    <li><a href="#">menu item</a>
                    </li>
                </ul>
            </div>
        </li>
        <li><a href="/companies">Companies</a>

            <div class="subnav">
                <ul class="companylist1">
                    <li><a href="#">1</a>
                    </li>
                    <li><a href="#">2</a>
                    </li>
                </ul>
            </div>
        </li>
        <li><a href="/locations">Locations</a>
        </li>
        <li><a href="/news">News</a>
        </li>
        <li><a href="/contact">Contact</a>
        </li>
    </ul>
</div>

Answer 1

目前唯一能做到这一点的方法是使用nth-of-type

.nav > ul > li:nth-of-type(1) > a, .nav > ul > li:nth-of-type(2) > a {
    color: #f00;
}

Demo

在上面的选择器中，我选择了直接嵌套在第一个和第二个 li 下的 a，它们进一步嵌套到 ul嵌套在 .nav

中