CSS伪类困惑:活跃

前端之家收集整理的这篇文章主要介绍了CSS伪类困惑:活跃前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在CSS上寻找 here:主动选择器. @H_404_2@

The :active selector styles links to
active pages

这让我想到了,HTML / CSS术语中的“活动页面”到底是什么……

此时我去了w3docs部分:5.11.3动态伪类:: hover,:active和:focus.

@H_404_2@

The :active pseudo-class applies while
an element is being activated by the
user. For example,between the times
the user presses the mouse button and
releases it.

所以我使用了w3shools try it pages中的一个,并将一个例子放在一起,用下面的代码代替,你可以用它来剪切&粘贴并尝试.

<html>
<head>
<style type="text/css">
:focus,:active
{
outline-offset: 10px;
outline: solid;
}
</style>
</head>

<body>
<p>Click the links to see the background color become yellow:</p>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>
<button type="button">Click Me!</button>
<form>
<input type="text"/>
</form>
</body>
</html>

表单字段适用于:焦点.但是按钮或链接不适用于:活动.

这是为什么?是否有关于“活动页面”的内容我不理解w3schools所谈到的.

谷歌搜索它时看到了这个nice tip,但我认为它不相关.

解决方法

CSS中没有“活动页面”的概念.事实上,SitePoint Reference揭穿了这个说法: @H_404_2@

The pseudo-class does not signify a link to the active,or current,page—that’s a common misconception among CSS beginners.

规范所说的是正确的:活跃的简单样式元素被激活,例如单击(如给出的示例中所示)或以某种其他方式触发,以便浏览器开始导航到链接的目标.

请注意,它不仅适用于< a>要素;它可能适用于任何被点击的非表单输入元素.例如,你可以这样做:

p:active {
    color: red;
}

您单击的任何段落都会将其文本闪烁为红色.

但请注意,确切的定义和实现由浏览器决定,但一般情况下,您可以依赖< a>.具有激活状态的元素.

猜你在找的CSS相关文章