[分享]css中如何设置默认选中

CSS是前端开发中不可或缺的一部分，可以用来美化页面的样式。在页面中，我们经常需要设置默认选中的内容，比如默认选中一个复选框或者单选框。下面我们来介绍一下如何用CSS实现这个功能。/ 设置复选框默认选...

CSS是前端开发中不可或缺的一部分，可以用来美化页面的样式。在页面中，我们经常需要设置默认选中的内容，比如默认选中一个复选框或者单选框。下面我们来介绍一下如何用CSS实现这个功能。

/* 设置复选框默认选中 */
input[type="checkbox"]:checked {
  background-color: red;
}

/* 设置单选框默认选中 */
input[type="radio"]:checked {
  color: green;
} 

上面这段代码中，我们使用了:checked伪类来选择默认选中的元素。对于复选框，我们使用input[type="checkbox"]来选择所有复选框，同时用:checked伪类来判断哪些复选框被选中了。对于单选框也是同样的处理方式。

在这里需要注意的是:checked伪类只能用在表单元素上，并且只有在输入状态改变时才会生效。同时，其他非表单元素，如div、span等，并不支持:checked伪类。

总的来说，使用CSS来设置默认选中的内容非常简单，只需要使用:checked伪类即可。如果要设置其他样式，只需要在该伪类下修改相应的CSS属性即可。