两个在CSS

Question

问题NAV元素：

为了编写通用CSS代码要被施加两个NAV元件。我已经遍寻谷歌和Stackoverflow没有任何成功。在W3C允许的情况下使用两个导航元素似乎并不常见。

HTML代码：

<!-- Global navigation --> 
<nav role="main"> 
    <ul> 
     <li><a href="index.html" class="active">Startpage</a></li> 
     <li><a href="cars.html">Cars</a></li> 
     <li><a href="about.html">About us</a></li> 
    </ul> 
</nav> 

<!-- Local navigation --> 
<nav role="sub"> 
    <ul> 
     <li><a href="ferrari.html" class="pressed">Ferrari</a></li> 
     <li><a href="bmw.html">BMW</a></li> 
     <li><a href="volo.html">Volvo</a></li> 
    </ul> 
</nav> 

CSS代码：

我怎么会写CSS代码，以便这两个导航元素具有相同的布局，但不同的样式（颜色，字体大小等）？

Answer 1

你可以做这样的事情：

nav ul li { 
 
    width:100px; 
 
    display:inline-block; 
 
    margin:5px; 
 
    padding:5px; 
 
    color:#333; 
 
    text-align: center; 
 
} 
 
nav[role="main"] ul li { 
 
    background-color:#aaa; 
 
} 
 
nav[role="sub"] ul li { 
 
    background-color:#eee; 
 
}

<!-- Global navigation --> 
 
<nav role="main"> 
 
    <ul> 
 
     <li><a href="index.html" class="active">Startpage</a></li> 
 
     <li><a href="cars.html">Cars</a></li> 
 
     <li><a href="about.html">About us</a></li> 
 
    </ul> 
 
</nav> 
 

 
<!-- Local navigation --> 
 
<nav role="sub"> 
 
    <ul> 
 
     <li><a href="ferrari.html" class="pressed">Ferrari</a></li> 
 
     <li><a href="bmw.html">BMW</a></li> 
 
     <li><a href="volo.html">Volvo</a></li> 
 
    </ul> 
 
</nav>

Answer 2

不知道你的

相同的外观，但不同的造型是什么意思

可以使用role属性作为一个CSS选择器，如下所示：

nav[role="main"], 
 
nav[role="sub"] { 
 
    background: #222; 
 
    color: #f40; 
 
} 
 

 
nav[role="main"] a, 
 
nav[role="sub"] a { 
 
    color: #fff; 
 
}

<nav role="main"> 
 
    <ul> 
 
    <li><a href="index.html" class="active">Startpage</a> 
 
    </li> 
 
    <li><a href="cars.html">Cars</a> 
 
    </li> 
 
    <li><a href="about.html">About us</a> 
 
    </li> 
 
    </ul> 
 
</nav> 
 

 
<!-- Local navigation --> 
 
<nav role="sub"> 
 
    <ul> 
 
    <li><a href="ferrari.html" class="pressed">Ferrari</a> 
 
    </li> 
 
    <li><a href="bmw.html">BMW</a> 
 
    </li> 
 
    <li><a href="volo.html">Volvo</a> 
 
    </li> 
 
    </ul> 
 
</nav>