Question

问题：

编写常见的CSS代码以便应用于两个nav元素。我在Google和Stackoverflow上搜索都没有成功。在W3C允许的情况下使用两个导航元素似乎并不常见。

HTML code：

<!-- 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选择器，如下所示：

＆＃13;

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

＆＃13;

<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>

＆＃13;

CSS中的两个nav元素

2 个答案: