探索 CSS 中的 :has() 选择器-css教程

首页 2024-07-09 22:49:12

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.3背景颜色s，颜色0.3s；
}

/* 标题样式 */
标头{
    显示：柔性；
    justify-content：空间之间；
    对齐项目：居中；
    内距：20px；
    背景颜色：#f0f0f00；
    边框底部：1px 实线#ddd；
}

/* 向右对齐主题选择器 */
.主题选择器{
    显示：柔性；
    对齐项目：居中；
    左边距:自动；
}

/* 标签与选择之间的空间 */
.主题选择器标签{
    右边距：10px；
}

/* 照明模式(默认) */
身体 {
    --背景颜色：#fff；
    --文字颜色：#000；
    --标题背景颜色：#f0f0f00；
    --标题边框颜色：#ddd；
}

/* 使用 :has 选择器的深色模式样式 */
:has(#theme-select option:checked[value="dark"]) body {
    --背景色：#333；
    --文字颜色：#fff；
    --标题背景颜色：#444；
    --标题边框颜色：#5555；
}

/* 使用 :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；
    --标题边框颜色：#5555；
}

:has 伪类是强大的 CSS 根据满足特定条件的后代元素的存在，选择器可以设置元素的样式。在此背景下：

:has(#主题选择选项：checked[value="dark"])

这意味着如果是的话 #theme-select 选择元素中的值为“dark样式将应用于“选项元素” body 元素。

option:checked[value=”dark”] 目标选择中的选项元素：

已勾选(选择)。
具有“暗”值属性。

您提供的 CSS 规则使用 :has 伪类结合 CSS 实现动态主题系统的变量。阅读 :has 更多选择器的例子

结论
:has() 选择器是当前的 CSS 这是一个非常有用的元素，它允许开发人员构建一个更动态和上下文感知的风格。理解和使用这个选择可以提高在线项目的互动性和视觉吸引力，并保持代码清晰和可维护性。

以上就是探索 CSS 中的 :has() 有关选择器的详细信息，请关注其他相关文章！

阅读全文

上一篇：MySQL 1核1G：性能强劲，足以应对常规需求
下一篇：无法复制文件？这些妙招轻松搞定！

探索 CSS 中的 :has() 选择器-css教程

首页 2024-07-09 22:49:12

最新文章

相关文章