:hover、:focus及:focus-within这3个选择器之间的区别是什么？

SEOer初学者难免会遇到处理部分前端css的问题，那有时候针对一下常见的选择器伪类会傻傻分不清楚，作为过来人，飞小优给大家完整介绍一下常见的三个选择器类型：:hover、:focus及:focus-within这3个选择器之间的区别是什么？

你提到的这三个选择器 .comment-form-comment:hover、.comment-form-comment:focus、.comment-form-comment:focus-within 都是在不同状态下改变评论框边框样式的 CSS 规则，它们的作用和区别如下：

选择器类别介绍

.xx:hover

• 作用：当鼠标悬停在评论输入框上时，触发该样式规则。
• 使用场景：用户将鼠标移动到评论输入框上方（未点击），仅在鼠标悬浮时生效。
• 示例：

.comment-form-comment:hover {
    border: 1px solid #014dff; /* 鼠标悬停时边框变为蓝色 */
}

• 效果：当用户将鼠标移到评论框上时，边框变为蓝色，但不会持续，鼠标移开时恢复到默认样式。

.xx:focus

• 作用：当用户点击或“聚焦”评论输入框时，触发该样式规则。
• 使用场景：用户点击输入框准备输入内容时，评论框获得焦点（通常输入框被激活后出现该状态）。
• 示例：

.comment-form-comment:focus {
    border: 1px solid #014dff; /* 聚焦时边框变为蓝色 */
}

• 效果：当用户点击评论框并开始输入时，边框变成蓝色。离开该输入框时，焦点丢失，边框回到默认状态。

.xx:focus-within

• 作用：当评论输入框内的任意元素获得焦点时，触发该样式规则。
• 使用场景：如果评论框内包含其他可聚焦的元素（例如输入框或按钮），只要这些子元素获得焦点，父级元素（整个评论框）就会应用此样式。
• 示例：

.comment-form-comment:focus-within {
    border-color: #014dff; /* 当内有元素获得焦点时边框变为蓝色 */
}

• 效果：只要评论框内的子元素（例如子输入框或按钮）有焦点，整个评论框的边框都会变为蓝色，不仅限于鼠标点击评论框本身。

区别总结

• :hover：鼠标悬浮时触发，不需点击。
• :focus：用户点击并聚焦输入框时触发，输入框失去焦点后恢复。
• :focus-within：如果输入框内有子元素获得焦点，则触发父容器的样式，适用于包含多个输入控件的复杂表单。

实际应用

如果你希望评论框在用户点击和输入时边框变为蓝色，并且当用户悬停在评论框上时也有蓝色边框效果，可以同时使用这些选择器：

.comment-form-comment:hover,
.comment-form-comment:focus,
.comment-form-comment:focus-within {
    border: 1px solid #014dff;
}

这样，无论是鼠标悬停、用户点击，还是输入框内的其他元素获得焦点时，评论框的边框都会变为蓝色。

好了以上就是对这三类选择器的介绍及使用方法，大家可以赶快在项目中试试吧！