css样式根据状态 |web前端html css js初级入门

/* 当鼠标悬停在按钮上时，改变按钮的样式 */
button:hover {
background-color: gray;
color: white;
}
/* 当一个链接被点击时，在链接文字下添加一个下划线 */
a:active {
text-decoration: underline;
}
/* 当一个单选框被选中时，改变它的颜色 */
input[type="radio"]:checked {
border: 2px solid red;
}
/* 当一个复选框被选中时，改变它的颜色 */
input[type="checkbox"]:checked {
background-color: yellow;
}

在这些示例中，CSS选择器基于元素的状态进行设置。您可以根据需要创建自己的样式，并根据不同的状态进行设置。这些状态包括悬停（hover）、点击（active）、选中（checked）和未选中（unchecked）等等。