:focus选择器：它通常适用于表单元素或可以使用键盘或鼠标聚焦的元素，如输入框、文本区域。当对特定元素使用键盘的tab键时，元素处于焦点状态。在用户将选项卡切换到另一个元素或单击之前，焦点状态将相同。
语法：
:focus { // CSS Property } 示例： 此示例说明了 :focus 选择器用法 –
<!DOCTYPE html> <html> <head> <title>Focus pseudo class</title> <style> div.one{ margin-left:40%; margin-top: 10%; } h1{ color: green; font-family: Arial, Helvetica, sans-serif; letter-spacing: 2px; } button{ font-size: x-large; padding: 10px; border: 2px solid black; } button:focus{ color: green; background-color: white; font-style: italic; } </style> </head> <body> <div class="one"> <h1>Yiibai Yiibai</h1> <button type="submit"> Focus or Click here </button> </div> </body> </html> 说明：在上面的示例中，使用以下 CSS 属性来设置 :focus 选择器。
button:focus { color: green; background-color: white; font-style: italic; } 这些 CSS 属性用于设置按钮的样式。
- 文本的颜色将变为绿色。
- 按钮的背景颜色将更改为白色。
- 字体样式将从正常更改为斜体。
active：它通常适用于按钮和锚标签。当用户点击鼠标时触发。在用户按住鼠标之前，活动状态将是相同的。
语法：
:active { // CSS property } 示例：此示例说明了 :active 选择器用法。
<!DOCTYPE html> <html> <head> <title> :active pseudo class </title> <style> div.one { margin-left:40%; margin-top: 10%; } h1 { color: green; font-family: Arial, Helvetica, sans-serif; letter-spacing: 2px; } button { font-size: x-large; padding: 10px; border: 2px solid black; } button:active { color:white; background-color: green; font-family: 'Courier New', Courier, monospace } </style> </head> <body> <div class="one"> <h1>Yiibai Yiibai</h1> <button type="submit"> Focus or Click here </button> </div> </body> </html> 说明：在上面的示例中，使用以下 CSS 属性来设置 :active 选择器。
button:active { background-color: green; font-family: 'Courier New', Courier, monospace } 通过这些代码行，改变了焦点按钮的样式 –
- 按钮的背景颜色将更改为绿色。
- 字体系列将被更改。
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/264288.html