css中selected用法

selected是CSS中的一个伪类选择器，用于选中被用户选中的元素。当用户使用鼠标或键盘选择文本时，选中的文本将应用selected样式。

举个例子，假设我们有一个HTML表单，其中包含一个下拉列表（select）元素，我们可以使用selected伪类选择器来为用户选择的选项添加样式。我们需要定义一个CSS样式规则，如下所示：

select option:selected {
  background-color: yellow;
  color: black;
}

在上面的代码中，我们使用了select option:selected选择器，它表示选中的是select元素下的option元素。然后，我们为选中的选项设置了背景颜色为黄色，文字颜色为黑色。

接下来，我们创建一个HTML表单，并在其中添加一个下拉列表：

<form>
  <label for="cars">选择一辆车:</label>
  <select name="cars" id="cars">
    <option value="volvo">沃尔沃</option>
    <option value="saab">萨博</option>
    <option value="mercedes">奔驰</option>
    <option value="audi">奥迪</option>
  </select>
</form>

当用户选择其中一个选项时，该选项将应用我们定义的样式规则，背景颜色将变为黄色，文字颜色将变为黑色。

selected伪类选择器不仅可以用于下拉列表，还可以用于其他可选中的元素，如单选按钮（radio）和复选框（checkbox）。我们可以通过为选中的单选按钮或复选框定义样式，使其在被选中时呈现不同的外观。

总结一下，selected伪类选择器在CSS中用于选中被用户选中的元素。通过为选中的元素定义样式，我们可以改变其外观，使其在被选中时呈现不同的效果。这在创建表单或其他需要用户输入的页面元素时非常有用。