[分享]CSS两个伪类连写

CSS中有许多伪类，其中两个经常被同时使用，那就是:hover和:focus。

a:hover {
    color: red;
    text-decoration: underline;
}
input:focus {
    border: 1px solid blue;
} 

当鼠标悬停在链接上时，:hover伪类可以让链接产生红色的文字和下划线。当用户点击带有焦点的输入框时，:focus伪类可以让输入框的边框变为1像素的蓝色实线。

这两个伪类的使用非常灵活，可以根据不同的场景实现不同的效果，如在表格中，使用:hover伪类可以让鼠标悬停在某一行时改变行的背景颜色或文本颜色，使用:focus伪类可以让用户在输入框中输入内容时自动聚焦到该输入框。

tr:hover {
    background-color: #f5f5f5;
}
input:focus {
    outline: none;
    box-shadow: 0 0 5px blue;
} 

当鼠标悬停在表格某一行上时，:hover伪类可以让该行的背景颜色变为淡灰色。但是需要注意的是，在使用:focus伪类时需要考虑到不同浏览器下的兼容性问题。例如，Chrome浏览器下默认会为聚焦的元素添加蓝色的外发光效果，可以通过设置outline:none来取消该效果，并使用box-shadow属性来为该元素添加自定义的聚焦效果。