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

你应该使用'＆gt;'在你的选择器中。有关子组合子选择器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>

Answer 2

像这样：

.container > ul {
  /*your style here*/
}

.container > ul > li {
  /*your style here*/
}

如何仅设置导航的顶级样式？

2 个答案: