风格所有的没有类的子元素？

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规则可以表示层次结构。例如，下面的方法：“应用此规则是一个导航元素内带班loginmenu所有li元素”）

nav.loginmenu li { 
    .. 
} 

很平常对我来说，类添加到一个没有规则的一个根元素它自己的，但是那个阶级影响其子女的行为。

当共享功能时，如果它仅仅表示某些行为（例如，为所有列表元素应用边界以便为它们分配空间），向多个元素添加一个类或向一个元素添加多个类（以空格分隔）一个“tabbing”的外观）

此外，很多属性（大多数的字体-...属性的实例）从父到子继承，除非它们在较低级别覆盖，所以没有必要重复这些为更进一步的后代。

Answer 3

不完全确定你要在这里做什么。但是如果我解释正确，你想要针对每个<nav>元素中的不同元素？如果是这样，你可以添加一个ID这应该是唯一的（不重复）您<nav>元素，则目标元素，像这样：

HTML：

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

CSS：

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

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