如何在CSS中定位不同于其他同级的锚点

Question

我有5个兄弟姐妹在一个没有编号的列表中。它们每个都有一个<a>元素。它们中的4个需要以相同的方式运行，当它们悬停时，它们需要改变其背景颜色。有一个元素在背景中完全不变。如何针对特定的<a>？我尝试使用id，但它不会覆盖前面的通用目标。我尝试过使用组合器的伪class :nth-child，但不起作用。

​

.nav-bar {
  display: inline-block;
  font-size: 1.2rem;
  background-color: rgba(85, 85, 85, 0.3);
  /* padding: 10px;  */
  /* margin: 10px; */
}

#slot-1 {
  background-color: #AD6500;
  /* padding: 1rem;   */
}

#slot-3 {
  background-color: none;
  display: inline-block;
  font-size: 1rem;
  /* padding: 1rem; */
}

a {
  color: white;
  text-decoration: none;
  display: inline-block;
  padding: 10px 20px;
  /* margin:0; */
}

a:hover {
  background-color: #AD6500;
  padding: 10px 20px;
}

<header>
  <nav>
    <ul class="list">
      <li class="nav-bar" id="slot-1">
        <a class="nav-bar-different-font-color" href="https://www.amazon.it">Home</a>
      </li>
      <li class="nav-bar" id="slot-2">
        <a href="https://www.amazon.it">News</a>
      </li>
      <li id="slot-3">
        <a href="https://www.amazon.it">February 27.2021 - New feature: CSS oeverflow: overlay</a>
      </li>
      <li class="nav-bar" id="slot-4">
        <a href="https://www.amazon.it">Compare Browsers</a>
      </li>
      <li class="nav-bar" id="slot-5">
        <a href="https://www.amazon.it">About</a>
      </li>
    </ul>
  </nav>

</header>

​

Answer 1

我用li:not( #slot-3 ) a:hover替换了你的a:hover行。我还删除了#slot-3的bg none规则

上面所说的是，以非id=slot-3的li元素为目标，并以其后代a:hover为目标。因此，对于插槽3，该规则根本不适用

做同样的事情还有其他方法，但我认为这是最干净的

​

.nav-bar {
  display: inline-block;
  font-size: 1.2rem;
  background-color: rgba(85, 85, 85, 0.3);
  /* padding: 10px;  */
  /* margin: 10px; */
}

#slot-1 {
  background-color: #AD6500;
  /* padding: 1rem;   */
}

#slot-3 {
  /* removed, not needed */
  /* background-color: none; */
  display: inline-block;
  font-size: 1rem;
  /* padding: 1rem; */
}

a {
  color: white;
  text-decoration: none;
  display: inline-block;
  padding: 10px 20px;
  /* margin:0; */
}

li:not( #slot-3 ) a:hover {
  background-color: #AD6500;
  padding: 10px 20px;
}

<header>
  <nav>
    <ul class="list">
      <li class="nav-bar" id="slot-1">
        <a class="nav-bar-different-font-color" href="https://www.amazon.it">Home</a>
      </li>
      <li class="nav-bar" id="slot-2">
        <a href="https://www.amazon.it">News</a>
      </li>
      <li id="slot-3">
        <a href="https://www.amazon.it">February 27.2021 - New feature: CSS oeverflow: overlay</a>
      </li>
      <li class="nav-bar" id="slot-4">
        <a href="https://www.amazon.it">Compare Browsers</a>
      </li>
      <li class="nav-bar" id="slot-5">
        <a href="https://www.amazon.it">About</a>
      </li>
    </ul>
  </nav>

</header>

​