共计 887 个字符,预计需要花费 3 分钟才能阅读完成。
CSS :active
伪类用于匹配被用户激活的元素。
:active
伪类是一个当元素被用户激活的时候动态添加的类。它通常用于为被激活的元素设置样式。
:active
伪类通常用来匹配 tab 键交互。通常用于但并不限于 <a>
和 <button>
元素。:active
伪类实际上可以为页面中的任何元素的激活状态设置样式。例如下面的代码为一个段落的激活状态设置样式:
p:active {background-color: #aaa;}
当你使用 CSS 来定义超链接的样式的时候,要注意它们的书写顺序。正确的书写顺序是::link—:visited—:hover—:active
。抽取第一个字母是“LVHA”,你可以把它记忆为“LoVe HAte”(喜欢讨厌)。
a:link {/* style links */}
a:visited {/* style visited link */}
a:hover {/* hover styles */}
a:active {/* active state styles */}
示例代码
下面的代码为页面中的超链接和一些其它的元素设置激活状态的样式。
a:active {
background-color: black;
color: white;
}
p:active {border: 2px dotted BlanchedAlmond;}
body:active {border: 5px solid}
示例代码
下面的例子在按钮 <a>
元素的 :hover 和:active状态时为按钮设置不同的样式。
浏览器支持
支持在超链接上使用 :active
伪类的浏览器有:Chrome, Firefox, Safari, Opera, Internet Explorer 以及 Android 和 iOS。
支持在页面的其它元素上使用 :active
伪类的浏览器有:Chrome, Firefox, Opera, Internet Explorer 8+ 以及 Android。
相关阅读
正文完