CSS中的高级选择器

在CSS中，选择器是用来选择文档中某个或某些元素的规则。标准的CSS选择器包括了id，class和标签选择器，但这些选择器有一定的限制，不能完全满足开发者的需求。因此，CSS还提供了一些高级选择器。

属性选择器

属性选择器可以根据元素的属性值来选择元素。常用属性选择器有以下几种：

• [attr]：选择具有该属性的所有元素；
• [attr=value]：选择具有该属性且属性值等于指定值的所有元素；
• [attr~=value]：选择具有该属性且属性值中包含指定值的所有元素；
• [attr|=value]：选择具有该属性且属性值以指定值为开头的所有元素；
• [attr^=value]：选择具有该属性且属性值以指定值为开头的所有元素；
• [attr$=value]：选择具有该属性且属性值以指定值为结尾的所有元素；
• [attr*=value]：选择具有该属性且属性值中包含指定值的所有元素。

举个例子：

/* 选择所有具有title属性的元素 */
[title] {
  color: red;
}

/* 选择所有href属性值以"http"开头的a标签 */
a[href^="http"] {
  color: blue;
}

/* 选择所有href属性值中包含"example.com"的a标签 */
a[href*="example.com"] {
  color: green;
}

伪类选择器

伪类选择器允许我们选择某个状态或行为的元素。常用伪类选择器有以下几种：

• :hover：选择鼠标悬停在元素上的元素；
• :active：选择被激活的元素；
• :focus：选择获得焦点的元素；
• :visited：选择已访问过的链接元素；
• :first-child：选择父元素中的第一个子元素；
• :last-child：选择父元素中的最后一个子元素；
• :nth-child(n)：选择父元素中的第n个子元素；
• :nth-last-child(n)：选择父元素中的倒数第n个子元素。

举个例子：

/* 鼠标悬停在button上时修改颜色 */
button:hover {
  color: red;
}

/* 访问过的链接字体颜色变为灰色 */
a:visited {
  color: gray;
}

/* 选择父元素中的第3个子元素 */
li:nth-child(3) {
  color: blue;
}

伪元素选择器

伪元素选择器用于创建一些不在文档树中的元素，并为其添加样式。常用伪元素选择器有以下几种：

• ::before：在元素之前添加一个虚拟的元素；
• ::after：在元素之后添加一个虚拟的元素；
• ::first-letter：选择元素的第一个字母；
• ::first-line：选择元素的第一行；
• ::selection：选择用户选中的文本。

举个例子：

/* 在所有p元素前插入一个'<>'字符 */
p::before {
  content: "<>";
}

/* 选择所有h1元素中的第一个字母并将其字体加粗 */
h1::first-letter {
  font-weight: bold;
}

结构伪类选择器

结构伪类选择器是根据元素在文档中的位置进行选择的。常用结构伪类选择器有以下几种：

• :first-of-type：选择与同种类型的元素中的第一个元素；
• :last-of-type：选择与同种类型的元素中的最后一个元素；
• :nth-of-type(n)：选择与同种类型的元素中的第n个元素；
• :nth-last-of-type(n)：选择与同种类型的元素中的倒数第n个元素；
• :only-of-type：选择文档中同种类型的唯一一个元素；
• :empty：选择没有子元素的元素。

举个例子：

/* 选择与同种类型的div元素中的第一个元素 */
div:first-of-type {
  color: red;
}

/* 选择与同种类型的li元素中的第3个元素 */
li:nth-of-type(3) {
  color: blue;
}

这些高级选择器可以在CSS中发挥出更强大的功能，帮助我们快速地定位并修改目标元素的属性。