JGF*_*FMK 8 css css-selectors pseudo-class
我在这里看CSS:主动选择器.
:活动选择器样式链接到活动页面
这让我想到了,HTML/CSS术语中的"活动页面"到底是什么......
此时我去了w3docs部分:5.11.3动态伪类:: hover,:active和:focus.
:在用户激活元素时应用:active伪类.例如,在用户按下鼠标按钮并释放它的时间之间.
所以我使用了其中一个w3shool尝试它的页面并将一个例子组合在一起,用下面的代码代替,你可以剪切并粘贴并尝试.
<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所谈到的.
谷歌搜索时,我看到了这个很好的提示,但我不认为这是相关的.
Bol*_*ock 26
CSS中没有"活动页面"的概念.事实上,SitePoint Reference通过以下方式揭穿了这一点:
伪类并不能表示一个链接到活动,或电流,页面-这是CSS新手中一个常见的误解.
规范说的是正确的::active简单地设置被激活的样式元素,例如点击(如给出的示例中)或以某种其他方式触发,以便浏览器开始导航到链接的目标.
请注意,它不仅适用于<a>元素; 它可能适用于任何被点击的非表单输入元素.例如,你可以这样做:
p:active {
color: red;
}
您单击的任何段落都会将其文本闪烁为红色.
但请注意,确切的定义和实现由浏览器决定,但通常,您可以依赖<a>具有激活状态的元素.