显示背景颜色的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规则，以便像按钮一样显示。(不使用bootstrap)

我想做的是，每当我在某个页面上，我想让标签有一个白色的背景色。为了让访问者知道当前打开的是哪个页面。

最后，我用下面的CSS规则 配置了它<<p>解决方案/strong>

.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并且不起作用的人，我在阅读文档并在小提琴上看到建议的解决方案时尝试了它。

有人能告诉我工作的解决方案和我与: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. 用户开始点击Home链接。他们的鼠标按钮按下，链接变成了:active。在规则中使用:active伪类的CSS应用于它。
2. 用户释放鼠标按钮。该链接不再是:active，你的CSS使用伪类停止应用。
3. 页面导航发生。:active的链接当然不再存在了!这是当你的类将接管，你实现你想要的效果。

:active有一个非常短的持续时间，从字面上看与用户交互的元素:他们通过点击它而不释放鼠标按钮来使它成为:active。在您的案例中，交互是短暂的，不会在页面导航期间延续。

这就是为什么使用类工作:类在页面加载时就在那里，将永远留在那里(除非你通过编程改变它)，并给你一种方法来应用你想要的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>

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

Answer 3

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

Answer 4

nav a.active { ... }

唯一的区别是说a.active而不是a:active，因为.active是一个类。你可以看看这个w3schools链接:(向下滚动一点，看到上面写着"活动/当前导航链接")

希望这对你有帮助!