CSS选择器标签 - CSS

CSS选择器标签是CSS中用于选取HTML元素的模式。 CSS选择器允许您对HTML元素应用样式，并使CSS更具可读性和灵活性。在CSS中，有各种选择器标签可用于定位和操作不同类型的HTML元素。

基本选择器标签

元素选择器

元素选择器匹配指定类型的所有HTML元素，例如，所有<h1>标签。这是最基本的选择器标签之一。

h1 {
  color: blue;
}

类选择器

类选择器用于匹配具有指定类的HTML元素，使用点（.`）符号表示类选择器。

.my-class {
  font-size: 18px;
}

ID选择器

ID选择器用于匹配具有指定ID的HTML元素。使用井号（#）符号表示ID选择器。

#my-id {
  background-color: red;
}

组合选择器标签

后代选择器

后代选择器指定一个元素的所有后代元素（输入元素的子元素、其子元素的子元素等等）的样式。它们使用空格符号作为连接符。

div p {
  color: green;
}

子选择器

子选择器仅选择其父元素的子元素。他们使用大于号（>）作为连接符。

ul > li {
  font-weight: bold;
}

相邻兄弟选择器

相邻兄弟选择器选择其前一个兄弟元素。它们使用加号（+）作为连接符。

h1 + p {
  font-size: 20px;
}

通用兄弟选择器

通用兄弟选择器选择其之前的所有兄弟元素。它们使用波浪号（~）作为连接符。

h1 ~ p {
  color: red;
}

属性选择器标签

存在属性选择器

此选择器匹配该属性存在即可，不需要考虑该属性的值。它们使用方括号（[]）表示：

[title] {
  color: orange;
}

值属性选择器

这些选择器根据属性值的不同选择元素。它们也使用方括号（[]）表示：

[type="email"] {
  border: 2px solid red;
}

子字符串属性选择器

这些选择器根据属性值中包含的子字符串选择元素。这里是一些示例：

[src*="google"] {
  border: 2px solid green;
}

[href$=".pdf"] {
  color: purple;
}

伪类选择器标签

链接伪类选择器

使用连接伪类选择器，可以更改链接的默认状态。使用以下示例中的选择器来定义链接的样式：

a:link {
  color: blue;
}

a:hover {
  color: green;
}

a:active {
  color: red;
}

a:visited {
  color: purple;
}

目标伪类

可以使用目标伪类选择器选取URL的fragment标识符。

:target {
  background-color: yellow;
}

选定伪类

使用选中的伪类选择器，可以更改某个元素被选中时的样式。

:checked {
  font-weight: bold;
}

总结

本文介绍了不同标记中最常见的CSS选择器标签，以及如何使用它们操作不同类型的HTML元素。 理解这些选择器标签将帮助您全面掌握CSS，并为您创建更强大的样式提供更多工具。