css 总结伪类元素的奇妙使用引言： CSS伪类元素是前端开发的关键部分，它们为我们提供了丰富而强大的样式选择工具。本

引言： CSS伪类元素是前端开发的关键部分，它们为我们提供了丰富而强大的样式选择工具。本文将全面解析CSS伪类元素，包括基础的伪类、新引入的伪类以及一系列高级选择器技巧，为读者提供深度学习和灵活运用这些特性的机会。

1. 基础伪类元素详解：

/* 1.1 :hover - 鼠标悬停时改变样式 */
a:hover {
  text-decoration: underline;
}

/* 1.2 :first-child - 第一个子元素的样式 */
li:first-child {
  font-weight: bold;
}

/* 1.3 :nth-child - 奇偶行背景色变化 */
tr:nth-child(even) {
  background-color: #f2f2f2;
}

解释： 基础伪类元素的应用，包括鼠标悬停、第一个子元素和奇偶行背景色变化。

2. 新引入的 `:where` 与 `:is` 伪类元素：

/* 2.1 :where - 使用where优雅选择 */
div:where(:not(.special)) :is(p, ul) {
  margin: 10px;
  padding: 5px;
}

/* 2.2 :is - 利用is组合状态选择 */
button:is(:hover, :focus) {
  background-color: #4CAF50;
  color: white;
}

/* 2.3 :is - 通过is匹配指定类 */
:is(.special, .highlight) {
  border: 2px solid yellow;
}

解释： 探讨新引入的:where和:is伪类元素，展示它们在条件选择和状态匹配上的强大威力。

3. 高级选择器技巧深入剖析：

/* 3.1 :not - 逆向选择非第一个子元素 */
li:not(:first-child) {
  margin-left: 10px;
}

/* 3.2 :not([hidden]) - 非隐藏元素的样式 */
div:not([hidden]) {
  background-color: #f0f0f0;
}

/* 3.3 :empty - 匹配空元素 */
p:empty {
  display: none;
}

/* 3.4 :enabled - 动态状态选择 */
input:enabled {
  border: 1px solid green;
}

解释： 详细介绍一些高级选择器技巧，包括:not逆向选择、:empty匹配空元素和:enabled选择启用状态的表单元素等。

4. 结合应用多种伪类元素的场景：

/* 4.1 复杂的组合条件选择 */
section:where([data-theme="dark"]) :is(h2, p) {
  color: #fff;
  background-color: #333;
}

/* 4.2 指定条件下的选择 */
a:is([href^="https"], [target="_blank"]) {
  color: blue;
}

解释： 展示如何结合多种伪类元素在实际项目中灵活应用，实现更复杂的选择条件。

5. 新增的伪类元素：

/* 5.1 :active - 激活状态下的样式 */
button:active {
  transform: translateY(2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 5.2 :visited - 已访问链接的样式 */
a:visited {
  color: purple;
}

/* 5.3 :nth-last-child - 从最后一个子元素开始的选择 */
li:nth-last-child(2) {
  font-style: italic;
}

/* 5.4 :first-of-type - 同类型元素中的第一个元素 */
p:first-of-type {
  font-weight: 700;
}

解释： 新增介绍:active伪类元素，以及:visited、:nth-last-child和:first-of-type等伪类元素。

6. 更多伪类元素的应用：

/* 6.1 :checked - 选中的表单元素 */
input:checked {
  background-color: lightblue;
}

/* 6.2 :focus-within - 包含有焦点元素的容器 */
div:focus-within {
  outline: 2px solid red;
}

/* 6.3 :nth-of-type - 同类型元素的选择 */
p:nth-of-type(odd) {
  color: purple;
}

解释： 深入了解其他伪类元素，包括:checked、:focus-within和:nth-of-type等，以拓展读者对选择器的认识。

7. 新的伪类元素：

/* 7.1 :nth-of-type() - 不同的选择方式 */
p:nth-of-type(2n+1) {
  color: green;
}

/* 7.2 :read-only - 只读表单元素的样式 */
input:read-only {
  background-color: #eee;
  cursor: not-allowed;
}

/* 7.3 :focus-visible - 在用户使用键盘时应用的:focus状态 */
input:focus-visible {
  outline: 2px solid DodgerBlue;
}
/* 7.4 :read-write - 可编辑元素的样式 */
textarea:read-write {
  border: 1px solid #ccc;
}

/* 7.5 :target - 选择当前活动的目标元素 */
#section1:target {
  background-color: yellow;
}

解释： 介绍新的:nth-of-type选择方式，以及:read-only、:focus-visible和:target等伪类元素。

8. 更多巧妙的伪类元素：

/* 8.1 :lang - 根据语言选择元素 */
p:lang(en) {
  color: blue;
}

/* 8.2 :fullscreen - 在全屏模式下的样式 */
div:fullscreen {
  background-color: #ccc;
}

/* 8.3 :indeterminate - 应用于表单元素的不确定状态 */
input:indeterminate {
  border: 2px solid orange;
}

/* 8.4 :checked + :not() - 选择被选中且不是禁用状态的元素 */
input:checked:not(:disabled) {
  box-shadow: 0 0 5px rgba(0, 128, 0, 0.7);
}

解释： 展示一些巧妙的伪类元素，包括:lang根据语言选择、:fullscreen全屏模式下的样式、:indeterminate表单元素的不确定状态，以及:checked + :not()的组合使用。

9. 定制化表单元素的伪类：

/* 9.1 :placeholder-shown - 输入框的占位符是否可见 */
input:placeholder-shown {
  border: 1px solid #ddd;
}

/* 9.2 :valid 和 :invalid - 表单元素的有效性状态 */
input:valid {
  background-color: lightgreen;
}

/* 9.3 :in-range 和 :out-of-range - 数值范围的表单元素状态 */
input:in-range {
  border: 1px solid green;
}

input:out-of-range {
  border: 1px solid red;
}

解释： 介绍定制化表单元素的伪类，包括:placeholder-shown占位符是否可见、:valid和:invalid表单元素的有效性状态，以及:in-range和:out-of-range数值范围的表单元素状态。

10. 强化交互体验的伪类：

/* 10.1 :hover + :focus - 提升交互体验 */
button:hover + :focus {
  background-color: #ffcc00;
}

/* 10.2 :focus-within - 包含有焦点元素的容器 */
div:focus-within {
  outline: 2px solid red;
}

解释： 强化交互体验的伪类，包括:hover + :focus提升交互体验，以及:focus-within选择包含有焦点元素的容器。

结语：

CSS伪类元素提供了强大的选择器工具，通过合理灵活地运用这些特性，我们可以更高效地进行样式设计和开发。希望本文对你深入理解和运用CSS伪类元素有所帮助。继续挖掘这一奇妙的选择器世界，创造出更出色的用户界面和交互体验。

css 总结 伪类元素的奇妙使用