css - 如何仅设计导航的顶层样式？

Question

我正在制作一个有两个级别的导航菜单。第一层或顶层是可见的水平条。第二层是一个垂直菜单，显示在单击的链接下方。我使用选择器“nav ul li a”等来执行此操作。我的问题是这些样式也适用于垂直的二级菜单。我可以使用哪些选择器将样式仅应用于顶层？

<nav>
                <div class="container dropdown">
                    <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="#">Forums</a></li>
                        <li><a href="#" data-toggle="dropdown">Articles</a>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                <li><a href="#">Nintendo</a></li>
                                <li><a href="#">PlayStation</a></li>
                                <li><a href="#">PC Gaming</a></li>
                                <li><a href="#">Xbox</a></li>
                            </ul></li>
                        <li><a href="#">Reviews</a></li>
                        <li><a href="#">Tutorials</a></li>
                        <li><a href="#">About</a></li>
                    </ul>
                </div>
            </nav>

header nav {
                border-top: 1px solid #333;
                border-bottom: 1px solid #222;
                margin-top: 25px;
                padding: 10px;
                box-shadow:         0px -5px 10px 0px rgba(0, 0, 0, 0.75);
            }
            header nav ul {
                list-style: none;
                padding-top: 10px;
            }
            header nav ul li {
                display: inline;
            }   
            header nav ul li a:link, header nav ul li a:visited, header nav ul li a:active, header nav ul li a:hover  {
                color: #777;
                font-size: 14px;
                text-decoration: none;
                text-shadow: 3px 3px 3px #454545;
                margin-right: 15px;
                padding: 15px 25px;
                box-shadow:         -5px 0px 10px 0px rgba(0, 0, 0, 0.75);
                border-right: 1px solid #333;
                border-bottom: 1px solid #333;
            }
            header nav ul li a:hover {
                color: #fff;
                text-shadow: 3px 3px 3px #666666;
                background: rgba(183, 31, 47, 0.25);            
            }

PS:这是带bootstrap的。

Answer 1

您应该在选择器中使用“>”。有关子组合器选择器的更多信息 here .

代替:nav ul li a

使用这个:nav > div > ul > li > a

header nav {
  border-top: 1px solid #333;
  border-bottom: 1px solid #222;
  margin-top: 25px;
  padding: 10px;
  box-shadow: 0px -5px 10px 0px rgba(0, 0, 0, 0.75);
}
header nav ul {
  list-style: none;
  padding-top: 10px;
}
header nav ul li {
  display: inline;
}
header nav > div > ul > li > a:link,
header nav > div > ul > li a:visited,
header nav > div > ul > li a:active,
header nav > div > ul > li > a:hover {
  color: #777;
  font-size: 14px;
  text-decoration: none;
  text-shadow: 3px 3px 3px #454545;
  margin-right: 15px;
  padding: 15px 25px;
  box-shadow: -5px 0px 10px 0px rgba(0, 0, 0, 0.75);
  border-right: 1px solid #333;
  border-bottom: 1px solid #333;
}
header > nav > ul > li > a:hover {
  color: #fff;
  text-shadow: 3px 3px 3px #666666;
  background: rgba(183, 31, 47, 0.25);
}

<header>
  <nav>
    <div class="container dropdown">
      <ul>
        <li><a href="index.html">Home</a>
        </li>
        <li><a href="#">Forums</a>
        </li>
        <li><a href="#" data-toggle="dropdown">Articles</a>
          <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
            <li><a href="#">Nintendo</a>
            </li>
            <li><a href="#">PlayStation</a>
            </li>
            <li><a href="#">PC Gaming</a>
            </li>
            <li><a href="#">Xbox</a>
            </li>
          </ul>
        </li>
        <li><a href="#">Reviews</a>
        </li>
        <li><a href="#">Tutorials</a>
        </li>
        <li><a href="#">About</a>
        </li>
      </ul>
    </div>
  </nav>
</header>