显示背景颜色的 CSS 伪类

问题描述

我有三个可以通过导航栏上的标签访问的 html 页面 因此，没有共享相同导航栏的主要布局。每个页面都有自己的 HTML5，但它们共享相同的 CSS 文件

当某个页面被访问时，它在导航栏上的页面有一个“active”类（见下文）

index.html 中的导航栏

<nav>
    <a href="index.html" class = "active">Home</a>
    <a href="teams.html">Teams</a>
    <a href="history.html">History</a>
    <a href="http://......" target="_blank">USA Ultimate</a>
</nav>

team.html 中的导航栏

<nav>
    <a href="index.html">Home</a>
    <a href="team.html" class = "active">Teams</a>
    <a href="history.html">History</a>
    <a href="http:...." target="_blank">USA Ultimate</a>
</nav>

等等的历史页面

每个标签都被赋予了 CSS 规则，可以像按钮一样显示。 （没有使用引导程序）

我试图做的是每当我在某个页面上时，我都希望标签具有白色背景色。为了让访问者知道当前打开的是哪个页面。

最后我用下面的 CSS 规则配置了它

解决方案

.active{
    background-color: #FFFFFF;
}

最初我试图通过使用伪类来做到这一点

1)

nav a:active{
    background-color: #FFFFFF;
}

2)

nav a:active:before{
    background-color: #FFFFFF;
}

3)

nav a:active:after{
    background-color: #FFFFFF;
}

也使用了 :target 伪类，但没有用。

对于那些标记为 1、2、3 并且不起作用的人，我在阅读文档并在 fiddle 上看到了建议的解决方案时尝试了它。

有人能告诉我有效的解决方案与我与 :target 一起尝试但无效的其他解决方案有什么区别吗？

解决方法

:active 伪类仅应用于被认为处于活动状态的元素：对于锚点，通常是从您在其上单击鼠标按钮到松开鼠标的时间按钮。那不是特别长的时间！

看看你的例子，它会像这样工作：

1. 用户开始点击主页链接。他们的鼠标按钮按下，该链接变为 :active。您在规则中使用 :active 伪类的 CSS 适用于它。
2. 用户释放鼠标按钮。该链接不再是 :active 并且您使用伪类的 CSS 停止应用。
3. 页面导航发生。那个 :active 的链接肯定已经不复存在了！这是您的课程接管并达到您想要的效果的时候。

:active 的持续时间非常短，与用户交互的元素紧密相关：他们通过点击元素而不释放鼠标按钮使其成为 :active。就您而言，这种交互是短暂的，不会在页面导航过程中延续。

这就是使用类有效的原因：该类在页面加载时就在那里，将始终留在那里（除非您以编程方式对其进行更改），并为您提供一种随心所欲地应用 CSS 的方法。

编辑以回答下面关于 :target 的问题。

:target 通过 ID 将元素匹配到 URL 片段。在您的示例中，您没有使用 ID，也没有使用网址片段，因此没有任何东西会被视为 :target。

:target 可以使用下面这样的结构，但要解决最好由 classNames 解决的问题还有很长的路要走：

<nav>
    <a href="index.html#home" id="home">Home</a>
    <a href="teams.html#teams" id="teams">Teams</a>
    <a href="history.html#history" id="history>History</a>
</nav>

在上面的示例中，每个链接都有一个片段和一个 ID 与片段匹配的元素（例如，#home 和第一个导航项目的 ID）。在这种情况下，您将拥有一个被视为 :target 的元素。

,

您使用了 nav a:active{...，但 active 是 类，因此您的选择器必须改为 nav a.active{...。 （点，不是冒号）

,

nav a.active { ... }

唯一的区别是说 a.active 而不是 a:active，因为 .active 是一个类。您可以查看此 w3schools link：（向下滚动到显示“活动/当前导航链接”的位置）

希望这有帮助！

,

只要你有三个页面，每个页面都有自己的 HTML 代码，你解决它的方法是你可以做到的，其他地方为了使用 :target 你必须移动如下 在每个 <a> 上指定一个 id 并且该 id 也在 href 的末尾是花边的。 见下文

<div class="side_col">

<a href="#sl1">
  <div id="sl1" class="side_link">Accounts
  </div>
</a>
<a href="#sl2">
  <div id="sl2" class="side_link">Newsletter
  </div>
</a>
<a href="#sl3">
  <div id="sl3" class="side_link">Operator
  </div>
</a>
<a href="#l4">
<a href="#sl4">
  <div id="sl4" class="side_link">Invoice
  </div>
</a>
</a>

和 CSS

#sl1:target:before,#sl2:target:before,#sl3:target:before,#sl4:target:before { background-color: #24BDE9; }