Question

我试图让锚点在活动和焦点上改变颜色但是我的语法错误或者样式被覆盖。

<ul id="nav">
    <li class="nav active">
     <a href="/">HERE</a>
    </li>
     <div class="dropdown">
      <li class="drop nav active">
        <a href="/about.php">ABOUT</a>
        <div class="dropdown-content">
       <ul>
         <li>
         <a href="/OTHER.php"><p class="drops">OTHER</p></a>     
        </li>
        <li>
         <a href="/THING.php"><p class="drops">THING</p></a>
        </li>
       </ul>
     </div>
    </li>
</ul>

和我的css

.drop a:hover,
.drop a:focus {
   background:lightgoldenrodyellow !important;
   color:red !important;
}

背景因悬停和焦点而改变，因为！important（没有它没有工作）但颜色不会改变。在查找冲突之前，只需要确保我没有一些愚蠢的语法错误。如果这是一场冲突，还有其他一些技巧可以克服它，我会很感激。

Answer 1

我认为没有真正的问题，但你可以：

将a：focus更改为a：active或确保将样式表包含在html中

Answer 2

在HTML 5之前，<p>是一个块级元素，<a>是内联的，后者不应该包含更早的内容。

换句话说：<a>应该在<p>内，而不是相反。也许您的文档不是HTML 5，或者至少您的浏览器不会将其视为HTML 5。以下代码适用于我：

.drop a:hover,
.drop a:focus {
  background: lightgoldenrodyellow;
  color: red;
}

<ul id="nav">
  <li class="nav active">
    <a href="/">HERE</a>
  </li>
  <div class="dropdown">
    <li class="drop nav active">
      <a href="/about.php">ABOUT</a>
      <div class="dropdown-content">
        <ul>
          <li>
            <p class="drops">
              <a href="/OTHER.php">OTHER</a>
            </p>
          </li>
          <li>
            <p class="drops">
              <a href="/THING.php">THING</a>
            </p>
          </li>
        </ul>
      </div>
    </li>
  </div>
</ul>

我还修复了HTML代码中的另一个语法错误：您在上一个</div>之前忘记了</ul>。

CSS锚点颜色变化在悬停和焦点时不会改变

2 个答案: