CSS伪class显示背景色

Question

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

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

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 规则以像按钮一样显示。（未使用 bootstrap）

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

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

解决方案

.active{
    background-color: #FFFFFF;
}

最初我尝试使用伪class

1)

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

2)

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

3)

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

也使用了 :target 伪 class 但没有用。

对于那些标记为 1、2、3 但没有用的，我在阅读文档时尝试了它，并在 fiddle.

上看到了建议的解决方案

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

Answer 1

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

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

用户开始点击主页 link。他们的鼠标按钮按下，link 变为 :active。您在规则中使用 :active 伪 class 的 CSS 适用于它。
用户释放鼠标按钮。 link 不再是 :active 并且您使用伪 class 的 CSS 停止应用。
页面导航发生。 :active 的 link 肯定已经不复存在了！这是您的 class 接管并实现您想要的效果的时候。

:active 有一个非常短的持续时间，从字面上与用户交互的元素相关联：他们通过单击它而不是释放鼠标按钮来实现 :active。在您的情况下，该交互很短暂，不会在页面导航期间继续。

这就是为什么使用 class 有效的原因：当页面加载时 class 就在那里，将始终保持在那里（除非您以编程方式更改它），并为您提供了一种应用您的方法的方法CSS随心所欲

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

:target 通过 ID 将元素匹配到 URL 片段。在您的示例中，您没有使用 ID，也没有使用 URL 片段，因此没有任何内容会被视为 :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>

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

的元素

Answer 2

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

Answer 3

nav a.active { ... }

唯一的区别是说 a.active 而不是 a:active，因为 .active 是 class。您可以查看此 w3schools link：（稍微向下滚动到它显示“Active/Current 导航 Link”的位置）

希望这对您有所帮助！

Answer 4

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

CSS伪class显示背景色

CSS pseudo class to display background color

html

css

css-selectors

pseudo-class