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'的nav实例制作background #e0e0e0，而不是像第二个实例那样＃000。

使用CSS：

#inpage {
  background: #e0e0e0;
}

没有任何区别。

必须简单。

非常感谢。

Answer 1

你应该坚持在nav[role="navigation"]中放置他们之间共享的样式。其他一切就是：


nav#inpage {
  ..
}

nav#navigation {
  ..
}

在同一页面上需要两种不同的样式用于CSS nav [role =＆＃34; navigation＆＃34;]的两种不同实现

1 个答案: