CSS中的两个nav元素

Question

Problem:

Writing common CSS code in order to be applied for two nav elements. I have searched all over Google and Stackoverflow without any success. It seems it's not common to use two nav elements while W3C allows it.

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

How would I write CSS code in order for the two navigation elements to have the same layout, but different styling (color, font size, etc.)?

Answer 1

You could do something like this:

 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

Not sure what you mean by

same appearance but different styling

You can use the role attribute as a CSS selector, as shown here:

 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>