一般人我都不告诉他的那些css伪选择器

什么是伪选择器

CSS 中的伪选择器是指用于匹配特定状态或位置的选择器，它们不是基于 HTML 元素的实际属性进行匹配，而是基于元素的状态或上下文进行匹配。

常用的伪选择

前端人员在开发中一般常常用到的伪选择器有以下几种：

:hover 伪选择器

:hover 伪选择器用于匹配鼠标悬停在元素上时的状态，可以为元素添加悬停效果。

当鼠标悬停在 a 链接元素文本上时，字体颜色会变成红色。

a:hover {
  color: red;
}

:active 伪选择器

:active 伪选择器用于匹配元素被点击时的状态，可以为元素添加点击效果。

当 button 按钮被点击时，button 背景会变成红色。

button:active {
  background-color: red;
}

:visited 伪选择器

:visited 伪选择器用于匹配已经被访问过的链接，可以为这些链接添加不同的样式，以便用户区分出已经访问过的链接和未访问过的链接。

当某个 a 链接元素被点击访问后，字体颜色会变成红色。

a:visited {
  color: red;
}

:focus 伪选择器

:focus 伪选择器用于匹配获得焦点的元素，可以为元素添加输入焦点效果。

当鼠标点击输入框获取输入框焦点，输入框会增加 2px 的红色边框。

input:focus {
  border: 2px solid red;
}

:first-child 伪选择器

:first-child 伪选择器用于匹配第一个子元素，可以为元素的第一个子元素添加样式。

当有多个 li 元素时，第一个 li 元素中的文本会变成红色。

li:first-child {
  color: red;
}

:nth-child(n) 伪选择器

:nth-child(n) 伪选择器用于匹配某个父元素的第 n 个子元素，可以为特定位置的子元素添加样式。

当 ul 元素内，有多个 li 子元素，让 ul 元素内的第 2 个 li 元素的背景色为红色。

ul li:nth-child(2) {
  background-color: red;
}

一般人不知道的一些伪选择器

其实除了上面这些伪选择器外，还有一些其他的伪选择器，它们可以为网页提供更加丰富的样式和交互效果。下面我们看看还有那些好用的标准伪选择器。

:first-of-type 伪选择器

:first-of-type 伪选择器用于匹配某个父元素中，同类型的第一个子元素，可以为某种类型的元素的第一个子元素添加样式。

div 标签中有多个 p 子元素，指定第一个 p 元素内的字体颜色为红色。

div p:first-of-type {
  color: red;
}

:last-of-type 伪选择器

:last-of-type 伪选择器用于匹配某个父元素中，同类型的最后一个子元素，可以为某种类型的元素的最后一个子元素添加样式。

div 元素中有多个 p 子元素，指定最后一个 p 元素内的字体颜色为红色。

div p:first-of-type {
  color: red;
}

:only-of-type 伪选择器

:only-of-type 伪选择器用于匹配某个父元素中，同类型的唯一一个子元素，可以为某种类型的元素的唯一一个子元素添加样式。

div 元素内有多个子元素，指定唯一没有任何兄弟元素的 p 标签内字体颜色为红色。

div p:only-of-type {
  color:red;
}

:nth-of-type(n) 伪选择器

:nth-of-type(n) 伪选择器用于匹配某个父元素中，同类型的第 n 个子元素，可以为特定位置的同类型元素添加样式。

div 内有多个不同的子元素，指定多个 p 元素中的第 3 个 p 元素背景色为红色。

div p:nth-of-type(3) {
  background-color: red;
}

:checked 伪选择器

:checked 伪选择器用于匹配被选中的表单元素，例如 checkbox、radio 和 select 元素。可以为被选中的表单元素添加样式。

多选框被选中时，边框颜色为红色。

input[type="checkbox"]:checked {
  border-color: red;
}

:not(selector) 伪选择器

:not(selector) 伪选择器用于匹配不符合给定选择器的元素，可以用于选中除某个元素以外的所有元素。而且它还可以是个运算符，可以多条件筛选。

div 元素内，非第一个子元素 p 的字体颜色为红色。

div p:not(:first-child) {
  color: red;
}

div 元素内，非 p 元素的字体颜色为红色。

div:not(p) {
  color: red;
}

div 元素内，非第一个子元素 p ,非最后一个子元素 p 的字体颜色为红色。

div p:not(:first-child):not(:last-child) {
  color: red;
}

:empty 伪选择器

:empty 伪选择器用于匹配没有子元素的元素，可以为没有内容的元素添加样式。

当 p 元素内，没有回车、空格或任何内容时，边框为 1px 的红色实线边框。

p:empty {
  border: 1px solid red;
}

:focus-within 伪选择器

:focus-within 伪选择器用于匹配包含有 focus 的元素，包括自身和后代元素。可以为包含有 focus 元素的父元素添加样式。

当 div 元素内有 focus 元素选中时，整个div背景色变为红色。

div:focus-within {
  background-color:red;
}

:lang(language) 伪选择器

:lang(language) 伪选择器用于匹配指定语言的元素，可以为不同语言的元素添加不同的样式。

指定中文字为微软雅黑。

p:lang(zh) {
  font-family: "Microsoft YaHei";
}

::first-line 伪选择器

::first-line 用于选择元素的第一行或第一段文本。它可以用于选择大多数块级元素和某些行内元素的第一行文本。

p 元素内第一行文本颜色为红色，字重为900.

p::first-line {
  font-weight: 900;
  color: red;
}

需要注意，::first-line 伪选择器不能选择多个元素的第一行文本，它只适用于单个元素。

此外，::first-line 伪选择器只能用于设置与文本相关的样式属性，例如字体大小、字体颜色、字体样式等。

而像宽度、高度、背景颜色等样式属性，不能用于 ::first-line 伪选择器。

::first-letter 伪选择器

::first-letter 伪选择器可以用于大多数块级元素和一些行内元素，如段落、标题等。

p 元素的第一个文本或字母的字号为 16px，字重为 900。

p::first-letter {
  font-size: 16px;
  font-weight: 900;
}

::first-letter 伪选择器只能用于设置与文本相关的样式属性，例如字体大小、字体颜色、字体样式等。而像其他样式属性，例如宽度、高度、背景颜色等，不能用于 ::first-letter 伪选择器。

::selection 伪选择器

::selection 伪选择器，用于选择用户选择的文本部分。

将为选中的文本部分设置黄色的背景和红色的字体颜色。

::selection {
  background-color: yellow;
  color: red;
}

::selection 伪选择器只能应用于一些文本相关的样式属性，例如背景颜色、字体颜色等。其他样式属性，例如边框、宽度等不能用于 ::selection 伪选择器。

以上这些标准性伪选择器可以为前端开发人员提供更加灵活的选择器，帮助开发者实现更加复杂的页面样式效果。希望这篇文章能帮助到大家更加了解css中的一些伪选择器，提高大家在实际开发中的效率，才能更好的去摸鱼。

秒客网