Question

我有多个导航器，我需要设计不同的风格，我没有办法做到这一点。我在网上看了很多但是我不明白如何在不使用class =“”的情况下执行此操作。我的代码如下。必须有更好的方法来做到这一点？像所有有class =“loginmenu”的孩子应该像x一样，所有class =“dropdownmenu”的孩子应该像y一样。即使它们是相同的元素。

 <nav class="loginmenu">
    <ul class="loginmenu">
        <li class="loginmenu">
           <p><a href="main_login.php">Login</a></p>
        </li>
    </ul>
</nav>


<nav class="dropdownmenu">
    <ul>
        <li class="gigs">
            <p><a href="gigs.php">Gigs</a></p>
            <p class="subtext">Shows & Gigs</p>
        </li>

        <li class="music">
            <p><a href="music.php">Music</a></p>
            <p class="subtext">Tracks & Sets</p>
        </li>

        <li class="booking">
            <p><a href="booking.php">Booking</a></p>
            <p class="subtext">Booking & Contact</p>
        </li>

CSS：

nav.loginmenu {
    position: absolute;
}
li.loginmenu{
    font-size: 25px;
    margin-left: 1200px;

} and so on...

Answer 1

您可以使用nav.loginmenu <element>。

nav.loginmenu li {
    font-size: 25px;
    margin-left: 1200px;
}

有关详细信息，请参阅the documentation of CSS selectors或尝试CSS Selector tester。

Answer 2

CSS规则可以表示层次结构。例如，以下表示：＆＃34; 将此规则应用于使用类loginmenu ＆＃34;的导航元素内的所有li元素;）

nav.loginmenu li {
  ..
}

我常常将类添加到一个没有自己规则的根元素，但是该类会影响其子代的行为。

当共享功能时，如果它只是表示某些行为（例如，对所有列表元素应用边距以给它们一个＆＃34; tabbing＆＃34; look）

此外，许多属性（例如，大多数font -...属性）都是从父级继承到子级，除非它们在较低级别被覆盖，因此不需要重复这些属性。进一步的后代。

Answer 3

不完全确定你在这里要做什么。但是如果我正确地解释，你想要在每个<nav>元素中定位不同的元素吗？如果是这样，您可以添加一个 id ，它应该是<nav>元素的唯一（不重复），然后像这样定位元素：

HTML：

<nav id="loginMenu">
    ...
</nav>

的CSS：

#loginMenu li {
    font-size: 25px;
    margin-left: 1200px;
}

或者您可以使用Genhis的答案。

样式所有没有类的子元素？

3 个答案: