[分享]css不用鼠标点击的状态

在CSS中，我们通常使用:hover伪类来为鼠标悬停时添加样式，这是很方便的。但是，假设我们想在没有任何鼠标操作的情况下改变元素的样式，该怎么做呢？ 下面是几个不同的CSS选择器，可以实现在不使用鼠标...

在CSS中，我们通常使用:hover伪类来为鼠标悬停时添加样式，这是很方便的。但是，假设我们想在没有任何鼠标操作的情况下改变元素的样式，该怎么做呢？

下面是几个不同的CSS选择器，可以实现在不使用鼠标点击的情况下改变元素的状态。

:focus-within伪类

该伪类将应用于包含当前焦点的元素以及其子元素。例如，当用户通过使用Tab键或Shift+Tab键在输入字段之间导航时，可以使用:focus-within样式来突出显示输入字段。

示例：

form:focus-within {
    background-color: #F5F5F5;
    border: 1px solid #CCCCCC;
}

:target伪类

该伪类将匹配与活动URI片段标识符匹配的元素。 URI片段标识符是URL中的＃后面的部分。例如，在以下URL中，＃section1是URI片段标识符：

https://example.com/page.html#section1

示例：

#section1:target {
    font-weight: bold;
    color: #FF0000;
}

:checked伪类

该伪类将应用于复选框，单选按钮和选项卡标签等，以指示其选择状态。可以通过应用:checked样式来更改样式。

示例：

input[type="checkbox"]:checked {
    background-color: #FFCFCF;
    color: #CC0000;
}

:enabled和:disabled伪类

这些伪类用于应用于启用或禁用输入字段的样式。

示例：

input:enabled {
    color: #000000;
    background-color: #FFFFFF;
}

input:disabled {
    color: #999999;
    background-color: #F5F5F5;
} 

这些是在CSS中实现不使用鼠标点击的状态的一些基本方法。这些伪类提供了一种简单但实用的方法，以确保用户不需要鼠标来使用您的网站。