CSS伪元素选择器：增强页面交互性与个性化

CSS伪元素选择器是CSS语言中的一种强大工具，它允许我们根据元素的状态或位置来应用特定的样式。本文将介绍一系列CSS伪元素选择器，并对每个选择器进行举例和说明，以帮助开发者更好地利用这些工具来增强网页的交互性和个性化。

:active 选择器

:active 选择器用于选择活动状态的元素，通常用于链接或按钮在被点击时的样式。

css 复制代码

a:active {
  color: red;
}

:checked 选择器

:checked 选择器用于选择被选中的<input>元素，如单选按钮或复选框。

css 复制代码

input:checked {
  background-color: lightblue;
}

:disabled 选择器

:disabled 选择器用于选择被禁用的<input>元素。

css 复制代码

input:disabled {
  opacity: 0.5;
}

:empty 选择器

:empty 选择器用于选择没有子元素的元素，如空的段落。

css 复制代码

p:empty {
  display: none;
}

:enabled 选择器

:enabled 选择器用于选择已启用的<input>元素。

css 复制代码

input:enabled {
  border: 1px solid black;
}

:first-child 选择器

:first-child 选择器用于选择作为其父的首个子元素的元素。

css 复制代码

p:first-child {
  font-weight: bold;
}

:first-of-type 选择器

:first-of-type 选择器用于选择作为其父的首个特定类型的子元素。

css 复制代码

p:first-of-type {
  color: green;
}

:focus 选择器

:focus 选择器用于选择获得焦点的元素，如输入框。

css 复制代码

input:focus {
  outline: 2px solid blue;
}

:hover 选择器

:hover 选择器用于选择鼠标悬停其上的元素。

css 复制代码

a:hover {
  text-decoration: underline;
}

:in-range 选择器

:in-range 选择器用于选择具有指定范围内值的<input>元素。

css 复制代码

input:in-range {
  border-color: green;
}

:invalid 选择器

:invalid 选择器用于选择所有具有无效值的<input>元素。

css 复制代码

input:invalid {
  border-color: red;
}

:lang(language) 选择器

:lang(language) 选择器用于选择每个lang属性值以特定语言代码开头的元素。

css 复制代码

p:lang(it) {
  font-style: italic;
}

:last-child 选择器

:last-child 选择器用于选择作为其父的最后一个子元素的元素。

css 复制代码

p:last-child {
  margin-bottom: 0;
}

:last-of-type 选择器

:last-of-type 选择器用于选择作为其父的最后一个特定类型的子元素。

css 复制代码

p:last-of-type {
  color: purple;
}

:link 选择器

:link 选择器用于选择所有未被访问的链接。

css 复制代码

a:link {
  color: blue;
}

:not(selector) 选择器

:not(selector) 选择器用于选择非特定选择器的元素。

css 复制代码

:not(p) {
  display: block;
}

:nth-child(n) 选择器

:nth-child(n) 选择器用于选择作为其父的第n个子元素的元素。

css 复制代码

p:nth-child(2) {
  background-color: lightyellow;
}

:nth-last-child(n) 选择器

:nth-last-child(n) 选择器用于选择作为父的倒数第n个子元素的元素。

css 复制代码

p:nth-last-child(2) {
  border-bottom: 1px solid gray;
}

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

:nth-last-of-type(n) 选择器用于选择作为父的倒数第n个特定类型的子元素。

css 复制代码

p:nth-last-of-type(2) {
  color: darkorange;
}

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

:nth-of-type(n) 选择器用于选择作为其父的第n个特定类型的子元素。

css 复制代码

p:nth-of-type(2) {
  font-weight: bold;
}

:only-of-type 选择器

:only-of-type 选择器用于选择作为其父的唯一特定类型的子元素。

css 复制代码

p:only-of-type {
  color: teal;
}

:only-child 选择器

:only-child 选择器用于选择作为其父的唯一子元素的元素。

css 复制代码

p:only-child {
  border: 1px solid gold;
}

:optional 选择器

:optional 选择器用于选择不带required属性的<input>元素。

css 复制代码

input:optional {
  border-style: dashed;
}

:out-of-range 选择器

:out-of-range 选择器用于选择值在指定范围之外的<input>元素。

css 复制代码

input:out-of-range {
  background-color: pink;
}

:read-only 选择器

:read-only 选择器用于选择指定了readonly属性的<input>元素。

css 复制代码

input:read-only {
  background-color: lightgray;
}

:read-write 选择器

:read-write 选择器用于选择不带readonly属性的<input>元素。

css 复制代码

input:read-write {
  cursor: text;
}

:required 选择器

:required 选择器用于选择指定了required属性的<input>元素。

css 复制代码

input:required {
  border-color: darkred;
}

:root 选择器

:root 选择器用于选择文档的根元素。

css 复制代码

:root {
  --accent-color: #3498db;
}

:target 选择器

:target 选择器用于选择当前活动的元素，通常与锚点链接一起使用。

css 复制代码

#news:target {
  border: 2px solid purple;
}

:valid 选择器

:valid 选择器用于选择所有具有有效值的<input>元素。

css 复制代码

input:valid {
  border-left: 5px solid green;
}

:visited 选择器

:visited 选择器用于选择所有已访问的链接。

css 复制代码

a:visited {
  color: purple;
}

通过这些伪元素选择器，开发者可以创建更具动态性和响应性的网页，提供丰富的用户体验。掌握这些选择器的使用，将极大地提升你的CSS技能。