非零基础自学前端最后一遍一 HTML+CSS 8 CSS常见选择器 8.9 动态伪类-focus

冷不防 2024-03-25 14:11 39阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  8 CSS常见选择器
         *   *  8.9 动态伪类-focus
             *   *  8.9.1 动态伪类 - :focus

![在这里插入图片描述][3a534b8825bf43ad8bad711b12517598.png_pic_center]

#### 一 HTML+CSS ####

#### 8 CSS常见选择器 ####

##### 8.9 动态伪类-focus #####

###### 8.9.1 动态伪类 - :focus ######

*  :focus指当前拥有输入焦点的元素（能接收键盘输入）
    
     *  文本输入框一聚焦后，背景就会变红色
    
    ![在这里插入图片描述][b378f4e5bbbe4741b576bd27b6625d13.png_pic_center]
 *  因为链接a元素可以被键盘的Tab键选中聚焦，所以:focus也适用于a元素
    
    ![在这里插入图片描述][6fab060d21e14618a69eceeecf45bfe6.png_pic_center]
 *  动态伪类编写顺序建议为  :link、:visited、:focus、:hover、:active
 *  直接给a元素设置样式，相当于给a元素的所有动态伪类都设置了
    
     *  相当于a:link、a:visited、a:hover、a:active、a:focus的color都是red
        
        ![在这里插入图片描述][58fd7c9cab67464095937c47ab36564b.png_pic_center]

[3a534b8825bf43ad8bad711b12517598.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/cbb514d5d4be44db8018085fd348e7aa.png
[b378f4e5bbbe4741b576bd27b6625d13.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/a58bf83917df4126af89ca1e9c9d4081.png
[6fab060d21e14618a69eceeecf45bfe6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/6540f290ed9649f5b45712706434987b.png
[58fd7c9cab67464095937c47ab36564b.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/3e0829c6131b4fa4b88433ad36698ad7.png