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伪类选择器选择可以直接在上方的实例中进行修改,然后运行,查看效果。



全栈前端 / CSS教程 :



























Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.