css 随着时间的推移取得了巨大的进步，引入了许多高级选择器，提高了精确和灵活地设置网页样式的能力。 css 选择器的最新添加之一是 :has() 伪类。本博客将详细介绍 :has() 选择器，包括其用法、优点和实际示例，以帮助您在 web 开发项目中使用这个强大的工具。
:has() 选择器是什么？
:has() 选择器是一个关系伪类，它允许您根据子树中是否存在后代或更复杂的关系来选择元素。简而言之，如果父元素包含特定的子组件，它允许您设置其样式。
语法：
:has() 选择器的基本语法如下：
元素：有（选择器）{
/* CSS 属性 */
}
:has() 选择器的实际例子：
主题选择器使用：有选择器
输出：
HTML：
<!DOCTYPE html>
<html lang="en">
<头>
<元字符集=“UTF-8”>
<meta name =“viewport”content =“width = device-width，initial-scale = 1.0”>
<title>主题选择器</title>
</头>
<正文>
<标题>
<h1>欢迎使用主题选择器</h1>
<div class="主题选择器">
<label for="theme-select">选择主题：</label>
<选择id =“主题选择”>
<option value="light">灯光模式</option>
<option value="dark">深色模式</option>
<option value="colorful">彩色模式</option>
</选择>
</div>
</标题>
<主要>
<p>这是使用 :has 选择器和 select 标签的主题选择器示例。</p>
</主要>
</正文>
</html>
CSS：
身体{
字体系列：Arial、无衬线字体；
背景颜色：#fff；
颜色：#000；
过渡：背景颜色0.3s，颜色0.3s；
}
/* 标题样式 */
标头{
显示：柔性；
justify-content：空间之间；
对齐项目：居中；
内边距：20px；
背景颜色：#f0f0f0；
边框底部：1px 实线#ddd；
}
/* 将主题选择器向右对齐 */
.主题选择器{
显示：柔性；
对齐项目：居中；
左边距：自动；
}
/* 标签和选择之间的空格 */
.主题选择器标签{
右边距：10px；
}
/* 灯光模式（默认） */
身体 {
--背景颜色：#fff；
--文字颜色：#000；
--标题背景颜色：#f0f0f0；
--标题边框颜色：#ddd；
}
/* 使用 :has 选择器的深色模式样式 */
:has(#theme-select option:checked[value="dark"]) body {
--背景颜色：#333；
--文字颜色：#fff；
--标题背景颜色：#444；
--标题边框颜色：#555；
}
/* 使用 :has 选择器的彩色模式样式 */
:has(#theme-select option:checked[value="colorful"]) body {
--bg-颜色：#ffefd5；
--文字颜色：#333；
--标题背景颜色：#ffdab9；
--标题边框颜色：#eea2ad；
}
/* 应用 CSS 变量 */
身体 {
背景颜色：var(--bg-color);
颜色：var(--文本颜色)；
}
标头{
背景颜色：var(--header-bg-color);
边框底部：1px 实心 var(--header-border-color);
}
/* 主要内容的样式 */
主要的 {
内边距：20px；
}
/* 选择标签样式 */
选择 {
内边距：5px；
字体大小：16px；
边框：1px实心#ccc；
边框半径：4px；
}
在 CSS 中使用变量，尤其是自定义属性（变量），具有多种好处，可以使样式表更易于管理、维护和扩展。这就是在提供的 CSS 中使用变量的原因。
立即学习“前端免费学习笔记（深入）”；
变量允许您定义一次值并在整个样式表中重复使用它。
例如：
身体{
--背景颜色：#fff；
--文字颜色：#000；
--标题背景颜色：#f0f0f0；
--标题边框颜色：#ddd；
}
然后可以在需要的地方使用这些变量，确保一致性并避免多次重复相同的值。
身体{
背景颜色：var(--bg-color);
颜色：var(--文本颜色)；
}
标头{
背景颜色：var(--header-bg-color);
边框底部：1px 实心 var(--header-border-color);
}
如果您必须更改配色方案或任何其他可重用属性，您只需编辑一次变量值，而不是在 CSS 中查找该值的每个实例：
:has(#theme-select option:checked[value="dark"]) body {
--背景颜色：#333；
--文字颜色：#fff；
--标题背景颜色：#444；
--标题边框颜色：#555；
}
:has 伪类是一个强大的 CSS 选择器，它使您能够根据满足特定条件的后代元素的存在来设置元素的样式。在这种背景下：
:has(#主题选择选项:checked[value="dark"])
这意味着如果在 #theme-select 元素中选中了值为“dark”的选项元素，则样式将应用于 body 元素。
option:checked[value=”dark”] 目标选择中的选项元素：
您提供的 CSS 规则使用 :has 伪类结合 CSS 变量来实现动态主题系统。阅读 :has 选择器的更多示例
结论
:has() 选择器是当前 CSS 中非常有用的元素，它允许开发人员构建更加动态和上下文感知的样式。了解和利用此选择可以让您提高在线项目的交互性和视觉吸引力，同时保持代码清晰和可维护。
以上就是探索 CSS 中的 :has() 选择器的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
170
收藏
