时间戳

首页 > 解决方案 > 如何定位第一个孩子的第一个孩子

css - 如何定位第一个孩子的第一个孩子

问题描述

.nav-list :first-child :first-child{
    font-weight:bold;
}

<nav>
    <div class="nav-mobile">
        <a id="nav-toggle" href="#!"><span></span></a>
    </div>
    <ul class="nav-list">
        <li><a href="homeCtrl.php?place=Home">Home</a></li>
        <li><a href="#!">About Us</a>
            <ul class="nav-dropdown">
                <li><a href="homeCtrl.php?place=Our Story">Our Story</a></li>
                <li><a href="homeCtrl.php?place=Our Work">Our Work</a></li>
                <li><a href="homeCtrl.php?place=SWAG Leaders">SWAG Leaders</a></li>
                <li><a href="homeCtrl.php?place=In the News">In the News</a></li>
            </ul>
        </li>
        <li><a href="homeCtrl.php?place=Calendar">Calendar</a></li>
        <li><a href="#!">Take Action</a>
            <ul class="nav-dropdown">
                <li><a href="homeCtrl.php?place=Get Involved">Get Involved</a></li>
                <li><a href="homeCtrl.php?place=Donate">Donate</a></li>
            </ul>
        </li>
        <li><a href="homeCtrl.php?place=Resources">Resources</a></li>
    </ul>
</nav>
<nav>
    <div class="nav-mobile">
        <a id="nav-toggle" href="#!"><span></span></a>
    </div>
    <ul class="nav-list">
        <li><a href="homeCtrl.php?place=Home">Home</a></li>
        <li><a href="#!">About Us</a>
            <ul class="nav-dropdown">
                <li><a href="homeCtrl.php?place=Our Story">Our Story</a></li>
                <li><a href="homeCtrl.php?place=Our Work">Our Work</a></li>
                <li><a href="homeCtrl.php?place=SWAG Leaders">SWAG Leaders</a></li>
                <li><a href="homeCtrl.php?place=In the News">In the News</a></li>
            </ul>
        </li>
        <li><a href="homeCtrl.php?place=Calendar">Calendar</a></li>
        <li><a href="#!">Take Action</a>
            <ul class="nav-dropdown">
                <li><a href="homeCtrl.php?place=Get Involved">Get Involved</a></li>
                <li><a href="homeCtrl.php?place=Donate">Donate</a></li>
            </ul>
        </li>
        <li><a href="homeCtrl.php?place=Resources">Resources</a></li>
    </ul>
</nav>

我有下面的导航菜单，我试图定位以下css：

.nav-list:first-child:first-child{
    font-weight:bold;
}

我希望将“Home”变为粗体，但没有任何反应

<nav>
    <div class="nav-mobile">
        <a id="nav-toggle" href="#!"><span></span></a>
    </div>
    <ul class="nav-list">
        <li><a href="homeCtrl.php?place=Home">Home</a></li>
        <li><a href="#!">About Us</a>
            <ul class="nav-dropdown">
                <li><a href="homeCtrl.php?place=Our Story">Our Story</a></li>
                <li><a href="homeCtrl.php?place=Our Work">Our Work</a></li>
                <li><a href="homeCtrl.php?place=SWAG Leaders">SWAG Leaders</a></li>
                <li><a href="homeCtrl.php?place=In the News">In the News</a></li>
            </ul>
        </li>
        <li><a href="homeCtrl.php?place=Calendar">Calendar</a></li>
        <li><a href="#!">Take Action</a>
            <ul class="nav-dropdown">
                <li><a href="homeCtrl.php?place=Get Involved">Get Involved</a></li>
                <li><a href="homeCtrl.php?place=Donate">Donate</a></li>
            </ul>
        </li>
        <li><a href="homeCtrl.php?place=Resources">Resources</a></li>
    </ul>
</nav>

标签： css

解决方案

https://jsfiddle.net/cmxna7vg/

.nav-list > li:first-child{
    font-weight:bold;
}

您需要通过“>”指定仅在嵌套的第一级搜索元素，然后指定该元素必须是第一个子元素。

推荐阅读