css样式中focus是什么意思？

什么是focus？

在CSS中，focus是一个伪类(pseudo-class)，表示元素正在被聚焦。当用户在页面上点击某个元素，这个元素就会处于聚焦状态。例如，当用户点击一个文本框，文本框就会出现一个聚光灯效果，这就是聚焦状态。一个元素只有在处于聚焦状态时，才能接收用户的键盘输入。

在CSS中，可以使用:focus选择器来选择处于聚焦状态的元素。在样式表中，可以为处于聚焦状态的元素设置不同的样式，以突出显示这个元素。下面是一个:focus选择器的例子：

input:focus{
    background-color: #f5f5f5;
    border: 2px solid blue;
}

上面的代码表示当一个文本框处于聚焦状态时，文本框的背景颜色会变成浅灰色，边框会变成深蓝色。

如何使用:focus选择器？

为文本框设置聚焦样式

我们可以为文本框设置聚焦样式，以使它在聚焦时更加容易被用户注意到。下面是一个示例：

input[type="text"]:focus{
    outline: none;
    border: 2px solid blue;
}

上面的代码表示当一个文本框处于聚焦状态时，文本框的边框会变成深蓝色。同时，我们还移除了文本框的默认聚焦样式，使得文本框看上去更加美观。

为按钮设置聚焦样式

不仅文本框可以设置聚焦样式，按钮也可以。我们可以为按钮设置聚焦样式，使得用户在点击按钮时，可以明确地看到它正在被聚焦。下面是一个示例：

button:focus{
    outline: none;
    box-shadow: 0 0 5px #007eff;
}

上面的代码表示当一个按钮处于聚焦状态时，按钮会出现一个蓝色的阴影。同时，我们还移除了按钮的默认聚焦样式，使得按钮看上去更加美观。

小结

在CSS中，focus是一个伪类，表示元素正在被聚焦。我们可以使用:focus选择器来选择处于聚焦状态的元素，并为它们设置不同的样式，以突出显示这个元素。在实际开发中，我们可以为文本框、按钮等多种元素设置聚焦样式，以提高用户体验。