CSS 按角色选择元素

CSS是一种用于样式化网页的语言，可以根据不同的选择器选择不同的元素并对其应用样式。除了基本的选择器（如元素选择器和类选择器）外，CSS还提供了按角色选择元素的能力。

ID选择器

ID选择器允许您按元素的唯一ID属性选择元素。在HTML中，ID属性为元素提供唯一标识符。

#element-id {
  /* CSS样式 */
}

其中，element-id是您要选择的元素的ID。

类选择器

类选择器允许您按元素的类属性选择元素。在HTML中，class属性可以为多个元素提供相同的类别。

.element-class {
  /* CSS样式 */
}

其中element-class是您要选择的元素的类。

属性选择器

属性选择器允许您按元素的属性值选择元素。

选择具有特定属性的元素：

[attribute] {
  /* CSS样式 */
}

attribute是您要选择的属性名。这将选择所有具有指定属性的元素。

选择具有特定属性且属性值匹配的元素：

[attribute=value] {
  /* CSS样式 */
}

attribute是您要选择的属性名，value是属性值。这将选择所有具有指定属性和属性值的元素。

选择具有特定属性并以特定值开头的元素：

[attribute^=value] {
  /* CSS样式 */
}

attribute是您要选择的属性名，value是属性值。这将选择所有具有指定属性且以特定值开头的元素。

选择具有特定属性并以特定值结尾的元素：

[attribute$=value] {
  /* CSS样式 */
}

attribute是您要选择的属性名，value是属性值。这将选择所有具有指定属性并以特定值结尾的元素。

选择具有特定属性并包含特定值的元素：

[attribute*=value] {
  /* CSS样式 */
}

attribute是您要选择的属性名，value是属性值。这将选择所有具有指定属性并包含指定值的元素。

伪类选择器

伪类选择器允许您选择在特定状态下的元素，例如当元素被鼠标指针悬停，元素被访问，或元素是第一个子元素。

选择第一个元素

:first-child {
  /* CSS样式 */
}

这将选择容器中的第一个子元素。

选择只有一个子元素的元素

:only-child {
  /* CSS样式 */
}

这将选择容器中唯一的子元素。

选择当前被访问的链接

:visited {
  /* CSS样式 */
}

这将选择位于已访问链接的样式。

选择鼠标悬停的元素

:hover {
  /* CSS样式 */
}

这将选择在鼠标悬停时的样式。

选择元素获得焦点时的状态

:focus {
  /* CSS样式 */
}

这将选择在元素获得焦点时的样式。

以上就是按角色选择元素的介绍。掌握这些选择器，您将能够更好地使用CSS控制和样式化HTML元素。