当前位置：首页 > news >正文

【学术投稿-第五届应用数学、建模与智能计算国际学术会议】CSS伪类选择器深度解析：分类、应用与技巧

news 2025/10/2 5:11:20

大会官网：www.cammic.org

大会时间：2025年3月21-23日

大会地点：中国-上海（上海大学宝山校区北大门乐乎新楼）

简介

第五届应用数学、建模与智能计算（CAMMIC 2025）将于2025年3月21-23日在中国上海召开。本次由上海大学主办。该会议已成功举办四届，吸引海内外500余名专家学者参会。会议将围绕"应用数学””建模与仿真“”智能计算“的最新研究领域，为来自国内外高等院校、科学研究所、企事业单位的专家、教授、学者、工程师等提供一个分享专业经验，扩大专业网络，面对面交流新思想以及展示研究成果的国际平台，探讨本领域发展所面临的关键性挑战问题和研究方向，以期推动该领域理论、技术在高校和企业的发展和应用，也为参会者建立业务或研究上的联系以及寻找未来事业上的全球合作伙伴。

前言

一、CSS伪类选择器分类

1. 动态伪类选择器

常见的动态伪类

示例

2. 结构伪类选择器

常见的结构伪类

示例

3. 语言和否定伪类选择器

常见的语言和否定伪类

示例

4. UI伪类选择器

常见的UI伪类

示例

二、总结

前言

本篇博客将深入讲解CSS伪类选择器，按照功能将其分类为：动态伪类、结构伪类、语言和否定伪类、以及UI伪类，并提供详细的用法、示例和注意事项，帮助更好地掌握这些强大的工具。

一、CSS伪类选择器分类

1. 动态伪类选择器

动态伪类主要用于控制元素在不同交互状态下的样式变化，通常与用户的鼠标操作或键盘操作相关。

常见的动态伪类

:hover —— 悬停状态
:active —— 被点击或按下的状态
:focus —— 获得焦点的状态
:focus-within —— 如果某元素或其子元素获得焦点
:focus-visible —— 当元素具有焦点且被键盘聚焦时

示例

<button>点击我</button>
<a href="#">悬停我</a>
<input type="text" placeholder="输入文本">

/* 悬停状态 */
a:hover {color: red;
}/* 点击状态 */
button:active {background-color: green;
}/* 焦点状态 */
input:focus {border: 2px solid blue;
}/* 焦点内状态 */
div:focus-within {border: 2px solid purple;
}/* 仅当键盘聚焦时显示焦点 */
input:focus-visible {outline: 3px solid orange;
}

注意事项

:hover和:active通常用于交互元素（如按钮、链接），能够给用户提供反馈。
:focus-within特别适用于表单元素，能够让整个父容器在任意子元素获取焦点时被高亮显示。

2. 结构伪类选择器

结构伪类选择器帮助你根据元素在文档中的位置或其父子关系来选中元素，而不依赖于元素的内容。

常见的结构伪类

:first-child —— 父元素的第一个子元素
:last-child —— 父元素的最后一个子元素
:nth-child(n) —— 父元素中第n个子元素
:nth-last-child(n) —— 从后往前数的第n个子元素
:only-child —— 父元素中唯一的子元素
:nth-of-type(n) —— 同类型元素的第n个子元素
:first-of-type —— 同类型元素的第一个
:last-of-type —— 同类型元素的最后一个
:empty —— 没有任何子元素的元素

示例

<ul><li>第一项</li><li>第二项</li><li>第三项</li>
</ul>

/* 父元素的第一个子元素 */
ul li:first-child {color: blue;
}/* 父元素的最后一个子元素 */
ul li:last-child {color: red;
}/* 第2个子元素 */
ul li:nth-child(2) {font-weight: bold;
}/* 父元素中唯一的子元素 */
div:only-child {background-color: lightgray;
}/* 只有第一项是li标签 */
ul li:first-of-type {font-size: 18px;
}

注意事项

:nth-child()可以接受数字、关键字odd（奇数）和even（偶数），也支持公式（如2n表示每两个元素）。
使用:nth-of-type()时，确保你选择的是同一类型的元素，如只选择<li>标签而不受其他标签影响。

3. 语言和否定伪类选择器

语言和否定伪类选择器主要用于通过元素的语言、类名、或者排除某些条件来选择元素。

常见的语言和否定伪类

:lang(language) —— 根据元素的语言属性选择元素
:not(selector) —— 排除与给定选择器匹配的元素

示例

<p lang="en">This is an English paragraph.</p>
<p lang="fr">C'est un paragraphe en français.</p>

/* 选择所有英语段落 */
p:lang(en) {color: blue;
}/* 排除所有具有class="exclude"的元素 */
div:not(.exclude) {background-color: yellow;
}

注意事项

:lang()伪类选择器非常适用于国际化（i18n）网页设计，允许你根据不同的语言应用不同的样式。
:not()伪类可以用来排除不想匹配的元素，非常灵活，但要注意性能问题，在复杂选择器中使用时要谨慎。

4. UI伪类选择器

UI伪类选择器用于根据元素的UI状态（如是否选中、是否禁用等）进行选择。

常见的UI伪类

:checked —— 选中状态（如复选框或单选框）
:disabled —— 禁用状态
:enabled —— 启用状态
:required —— 必填状态
:optional —— 可选状态
:valid —— 表单元素内容有效
:invalid —— 表单元素内容无效

示例

<input type="checkbox" checked> 选中
<input type="checkbox"> 未选中
<input type="text" required>

/* 选中状态 */
input:checked {background-color: lightgreen;
}/* 禁用状态 */
input:disabled {background-color: lightgray;
}/* 必填状态 */
input:required {border: 2px solid red;
}

注意事项：

:checked常用于复选框和单选框，能够控制它们在选中状态时的样式。
:required和:optional是表单控件的伪类，常用于表单验证时应用不同样式。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>UI伪类</title><style>/* 选中勾选的复选或者单选框 */input:checked{width:30px;height:30px;}/* 选中可用的输入框 */input:enabled{background-color:green;}/* 选中禁用的输入框 */input:disabled{background-color:grey;}input:required {border: 20px solid red;
}</style>
</head>
<body><input type="checkbox"><input type="radio" name="gender"><input type="radio" name="gender"><input type="password" required></input><input type="text" disabled></input>
</body>
</html>

二、总结

CSS伪类选择器为我们提供了强大的样式控制功能。通过动态伪类、结构伪类、语言和否定伪类以及UI伪类，我们可以轻松地根据元素的不同状态、位置、类型或语言来应用样式。

掌握这些伪类选择器的用法，能够让你的页面更加智能和富有交互性，提升用户体验。在实际开发中，伪类选择器不仅减少了对JavaScript的依赖，还大大简化了样式的管理和实现。

通过合理运用这些选择器，你可以在不增加额外复杂度的情况下，让你的网页更具表现力和可访问性。

前言

一、CSS伪类选择器分类

1. 动态伪类选择器

常见的动态伪类

示例

2. 结构伪类选择器

常见的结构伪类

示例

3. 语言和否定伪类选择器

常见的语言和否定伪类

示例

4. UI伪类选择器

常见的UI伪类

示例

二、总结

相关文章：