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

Question

我有以下菜单，当我使用下面的 CSS 时，它下面会出现一个小箭头，但我只希望该箭头出现如果 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

中