Posted on | by liu
CSS中的li选中样式
在HTML中，可以使用无序列表标签
和有序列表标签来创建列表。而列表中的每一个项则是用列表项标签- 来创建的。在CSS中，大家可以针对这些列表项
- 进行样式设置，包括选中时的样式。
要针对
- 元素设置选中样式，大家可以使用CSS伪类选择器：:hover和:focus。其中:hover可以在鼠标悬停在元素上时应用样式，而:focus则可以在元素获取焦点时应用样式。
举个例子，如果大家要设置选中的列表项
- 在鼠标悬停或获取焦点时变色，可以这样设置：
pre{
li:hover{
background-color: #ccc;
}
li:focus{
background-color: #ccc;
}
}
这个例子中，大家使用了background-color属性来设置背景颜色为灰色，但实际应用中可以根据设计需求设置不同的颜色或效果。
除了:hover和:focus外，大家还可以使用:active伪类选择器来控制选中时的样式。:active用于当元素被点击时应用样式。例如，如果大家想要选中的列表项
- 在点击后变成粗体字，可以这样设置：
pre{
li:active{
font-weight: bold;
}
}
需要注意的是，:active伪类选择器只有在元素被点击时才会应用样式，因此对于鼠标悬停或获取焦点时的样式设置，应该使用:hover和:focus选择器。
总之，在设置列表项的样式时，通过使用伪类选择器可以很方便地控制选中时的样式，让页面具有更好的可读性和可操作性。