如何解决显示背景颜色的 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
伪类仅应用于被认为处于活动状态的元素:对于锚点,通常是从您在其上单击鼠标按钮到松开鼠标的时间按钮。那不是特别长的时间!
看看你的例子,它会像这样工作:
- 用户开始点击主页链接。他们的鼠标按钮按下,该链接变为
:active
。您在规则中使用:active
伪类的 CSS 适用于它。 - 用户释放鼠标按钮。该链接不再是
:active
并且您使用伪类的 CSS 停止应用。 - 页面导航发生。那个
: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; }
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。