gpt4 book ai didi

css - 被 CSS 伪类 :active 迷惑

转载 作者:技术小花猫 更新时间:2023-10-29 10:59:02 28 4
gpt4 key购买 nike

我在找 here在 CSS 中:事件选择器。

The :active selector styles links toactive pages

这让我开始思考,HTML/CSS 术语中的“事件页面”到底是什么……

此时我去了w3docs第 5.11.3 节动态伪类::hover、:active 和 :focus。

The :active pseudo-class applies whilean element is being activated by theuser. For example, between the timesthe user presses the mouse button andreleases 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>

表单字段适用于 :focus。但是按钮或链接不适用于 :active。

这是为什么呢?是否有关于“事件页面”的内容我不理解 w3schools 谈到的内容。

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

最佳答案

CSS 中没有“事件页面”的概念。事实上,SitePoint Reference通过说来揭穿这一点:

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

规范所说的是正确的::active简单地为激活的元素设置样式,例如单击(如在给定的示例中)或以其他方式触发,以便浏览器开始导航到链接的目标。

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

p:active {
color: red;
}

您点击的任何段落都会使其文本闪烁红色。

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

关于css - 被 CSS 伪类 :active 迷惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5045352/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com