面试题：CSS伪类选择器在表单交互状态设计中的综合应用

Question

假设页面上有一个登录表单，包含用户名输入框、密码输入框和登录按钮。请使用CSS伪类选择器实现以下交互效果：输入框在获取焦点时，边框颜色变为橙色；若输入框内容为空且失去焦点，边框颜色变为红色并显示提示文字'请输入内容'；登录按钮在禁用状态下，透明度为0.5且鼠标悬停时无任何效果。请详细描述实现思路并写出主要的CSS代码。

Answer 1

实现思路

1. 输入框获取焦点效果：使用input:focus伪类选择器，选中获取焦点的输入框，修改其边框颜色为橙色。
2. 输入框内容为空且失去焦点效果：使用input:empty:focus-within伪类选择器，选中内容为空且失去焦点的输入框，修改其边框颜色为红色，并通过::after伪元素显示提示文字“请输入内容”。
3. 登录按钮禁用状态效果：使用button:disabled伪类选择器，选中禁用状态的按钮，设置透明度为0.5，并通过button:disabled:hover伪类选择器，确保鼠标悬停时无效果。

主要CSS代码

/* 输入框获取焦点时，边框颜色变为橙色 */
input:focus {
    border-color: orange;
}

/* 输入框内容为空且失去焦点时，边框颜色变为红色并显示提示文字 */
input:empty:focus-within {
    border-color: red;
    position: relative;
}
input:empty:focus-within::after {
    content: '请输入内容';
    position: absolute;
    color: red;
    font-size: 12px;
    top: 100%;
    left: 0;
}

/* 登录按钮禁用状态下，透明度为0.5且鼠标悬停时无任何效果 */
button:disabled {
    opacity: 0.5;
}
button:disabled:hover {
    cursor: default;
    /* 这里可以不设置其他样式，确保悬停无效果 */
}