探索 CSS 中的 :has() 选择器

百变鹏仔 3个月前 (09-19) #CSS

文章标签选择器

css 随着时间的推移取得了巨大的进步，引入了许多高级选择器，提高了精确和灵活地设置网页样式的能力。 css 选择器的最新添加之一是 :has() 伪类。本博客将详细介绍 :has() 选择器，包括其用法、优点和实际示例，以帮助您在 web 开发项目中使用这个强大的工具。

:has() 选择器是什么？
:has() 选择器是一个关系伪类，它允许您根据子树中是否存在后代或更复杂的关系来选择元素。简而言之，如果父元素包含特定的子组件，它允许您设置其样式。

语法：
:has() 选择器的基本语法如下：

元素：有（选择器）{  /* CSS 属性 */}

:has() 选择器的实际例子：

主题选择器使用：有选择器
输出：

HTML：

        <meta name="“viewport”content" device-width><title>主题选择器</title>头&gt;            <h1>欢迎使用主题选择器</h1>        <div class="主题选择器">            <label for="theme-select">选择主题：</label>                            <option value="light">灯光模式</option><option value="dark">深色模式</option><option value="colorful">彩色模式</option>选择&gt;        </div>    标题&gt;            <p>这是使用 :has 选择器和 select 标签的主题选择器示例。</p>    主要&gt;正文&gt;

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() 选择器

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写