显示背景颜色的 CSS 伪类

Question

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

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

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 的其他解决方案之间有什么区别吗？

Answer 1

只要你有三个页面，每个页面都有自己的 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; }

Answer 2

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

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

1. 用户开始单击主页链接。他们的鼠标按钮按下，该链接变为:active。您在规则中使用 :active 伪类的 CSS 适用于它。
2. 用户释放鼠标按钮。该链接不再是 :active 并且您使用伪类的 CSS 将停止应用。
3. 页面导航发生。 :active 的链接肯定不再存在！这是您的班级接管并实现您想要的效果的时候。

:active 的持续时间非常短，与用户正在与之交互的元素直接相关：他们通过点击它而不释放鼠标按钮来使其成为:active。在您的情况下，这种交互是短暂的，不会在页面导航期间延续。

这就是使用类有效的原因：当页面加载时，该类就在那里，将始终留在那里（除非您以编程方式更改它），并为您提供了一种按照需要应用 CSS 的方法。

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

:target 按 ID 将元素与 URL 片段匹配。在您的示例中，您没有使用 ID，也没有使用 URL 片段，因此没有任何内容可以被视为 :target。

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

<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 的元素。

Answer 3

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

Answer 4

nav a.active { ... }

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

希望这会有所帮助！