CSS :active选择器,设置激活的链接或其它元素样式
:active选择器
:active选择器是CSS众多伪类选择器中的一种,可用于选择活动的链接(也就是当一条链接被点击时便成为活动链接),并设置相关的样式。那么如果是按钮的元素可不可以设置:active的样式呢?如果是个div或其它的HTML元素是否也可以呢?看看下方的实例代码吧。
:active选择器实例代码,及在线编辑器
<a id='e1' href='https://www.x1y1z1.com/python/python_index.html' target='_blank'>python全栈之python语法</a>
<button id='e2'>点击</button>
<style>
#e1:active{color:green;}
#e2:active{background-color:green;}
/*注意点击后的链接颜色变化和按钮背景色的变化,变化时间可能比较短*/
</style>
实例代码解析
如上代码,先通过id选择器选择了链接a元素和按钮button元素,然后通过:active伪类选择器选择二者被点击时的状态,并设置相关的样式,发现,:active伪类选择器不但可以用于设置链接被激活时的样式,也可以设置button被点击时的样式。那其它的HTML元素是否也可以被:active伪类选择呢?下面尝试一下点击一个div,看能不能被选择。
:active可用于div实例代码
<div id='e3'></div>
<style>
#e3{width:100%;height:100%}
#e3:active{background-color:skyblue;}
/*运行之后,点击右侧空白处,看看背景颜色的变化*/
</style>
提示
这是一个可以在线编辑运行的HTML+CSS+JS编辑器,所以,想了解其它的HTML元素是否也可以被:active伪类选择器选择可以直接在上方的实例中进行修改,然后运行,查看效果。