html - 同一页面上的 CSS nav[role ="navigation"] 的两种不同实现需要两种不同的样式

Question

我在一页上的两个不同位置(侧面导航和页脚导航)使用 nav[role="navigation"]。

我只是想将页脚导航设置为不同于侧边导航的样式，但我不知道如何使用 CSS 实现。

首次使用:(你可以看到我希望通过提供“id”属性我可以这样设置它的样式...)

<section class="links">
  <nav role="navigation" id="inpage">
    <ul>
      <li>
         <h2><a href="http://www.site.uk/contact/">Contact us</a></h2>
         <p>Find details of how to contact us.</p>
      </li>
    </ul>
  </nav>
</section>

第二次使用

<nav role="navigation" id="navigation" aria-label="Navigation">
  <div class="inner">
    <h6>About</h6>
      <ul class="about">
        <li><a href="/about/">About this site</a></li>
        <li><a href="/accessibility/">Accessibility</a></li>
      </ul>
   </div>
</nav>

CSS

nav[role="navigation"] {
 background-color: #000 !important;
 height:100%;
}

nav[role="navigation"] h2 {
 border: none;
}

#navigation .inner ul li {
 display: block;
 list-style: none;
 margin: 0;
 padding: 0;
 position: relative
}

问题在于，这自然会为 nav[role="navigation"] 的两种用法设置样式。

我只是想为我添加了“id”的导航实例制作背景#e0e0e0，而不是像第二个实例那样是#000。

使用 CSS:

#inpage {
  background: #e0e0e0;
}

没有区别。

必须简单。

非常感谢。

Answer 1

您应该坚持将它们之间共享的样式放在 nav[role="navigation"] 中。对于其他一切，只需执行:

nav#inpage {
  ..
}

nav#navigation {
  ..
}