HTML中的:focus和:active选择器之间的区别
:焦点
:focus选择器用于在表单元素(例如按钮,链接,输入框)获得焦点时应用所需的样式。元素可以使用鼠标或Tab键获得焦点。焦点一直停留在元素上,直到另一个元素获得焦点。
:活性
:active选择器用于指示锚标记处于活动状态或按钮处于活动状态。当鼠标按下时,活动选择器将应用并保持应用状态,直到鼠标按下。
示例
在示例之后,显示了:focus以及按钮和链接上的:active选择器的用法。
<!DOCTYPE html> <html> <head> <title>Selector Example</title> <style> button { border: 2px solid black; } button:focus { border: 2px dotted red; } a { color: black; } a:active { color: red; } </style> </head> <body> <button type="submit">Focus Me</button> <a href="#">Active Me</a> </body> </html>