CSS锚颜色变化在悬停和焦点上没有改变答案

【问题标题】：CSS anchor color change not changing on hover and focusCSS锚颜色变化在悬停和焦点上没有改变
【发布时间】：2016-02-20 16:43:12
【问题描述】：

我正在尝试让锚点在活动和焦点上更改颜色，但我的语法错误或样式被覆盖。

<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（没有它就无法工作），悬停和聚焦时背景会发生变化，但颜色不会改变。只需要确保在查找冲突之前我没有一些愚蠢的语法错误。如果这是一个冲突并且有其他技巧可以覆盖它，我将不胜感激。

【问题讨论】：

HTML 无效。 div 不能是 UL 的子项

标签： css hover focus anchor

【解决方案1】：

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

换句话说：<a> 应该在 <p> 内部，而不是相反。也许您的文档不是 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 代码中的另一个语法错误：您在最后一个 </ul> 之前忘记了 </div>。

【讨论】：

在 HTML 5 中：A 元素在包含短语内容时被视为短语元素，当它包含流内容时被视为流元素 Permitted Content 是：短语内容和流元素 p 元素是允许的父母是：任何可以包含流元素的元素。允许的内容是短语内容
@Konrud：好点，我相应地更新了我的答案。我们不知道问题的作者使用 HTML 5 及以上代码是否适合我。

【解决方案2】：

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

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

【讨论】：