CSS高级选择器：揭秘现代网页设计的利器

嘿，大家好！👋 欢迎来到我的博客！👋

今天，我们将深入探索 高级 CSS 选择器。这些选择器，如 :is()、:where()、:not() 和 :has()，乍一看来可能会因为它们的 特定性规则 或浏览器支持问题而显得有些棘手，但它们是非常强大的工具，可以帮助我们创建更高效和更动态的 CSS。让我们一起探索这些选择器，了解它们的工作原理，看看它们的实际应用，并讨论一些额外的细节。

在这篇文章中，你将学到什么

• 了解每个选择器：解析 : is()、: where()、: not() 和 : has() 等。

• 浏览器兼容性：知道哪些浏览器能用这些选择器。

• 具体性解析：这些选择器如何影响CSS规则的应用效果。

• 实际示例：这里有一些实际例子，展示如何使用这些选择器来简化你的CSS。

• 实用技巧：有效使用这些选择器的技巧。

:is() 是什么？

:is()伪类选择器允许你为多个选择器应用相同的样式，而无需重复定义属性。它特别适合用于将具有不同优先级的选择器分组。

例子

    <div class="alert 成功">成功提示</div>
    <div class="alert 错误">错误提示</div>
    <div class="alert 警告">警告提示</div>

全屏模式 退出全屏

    :is(.alert.success, .alert.error, .alert.warning) {
        font-weight: bold;
        border: 1px solid;
        border-radius: 4px;
    }

    .alert.success { border-color: green; }
    .alert.error { border-color: red; }
    .alert.warning { border-color: orange; }

全屏，退出全屏

最终结果是，所有警报类型都使用加粗字体和边框来突出，颜色由它们的特定类别定义。

💡 提示： 你可以将所有示例代码复制并粘贴到Codepen，看看实际效果如何。

:where() 是什么？

类似于 :is()，:where() 也可以组合选择器的功能，但它特异性为 0，因此非常适合用来创建可以轻松被覆盖或替换的样式。

例子：

    <button class="primary">主要按钮</button>
    <input type="button" value="次按钮">
    <input type="submit" value="提交表单">

全屏 退出全屏

/* 低优先级按钮样式 */
:where(button, input[type="button"], input[type="submit"]) {
    font-size: 1rem;
    padding: 0.5em 1em;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

/* 主按钮的具体样式覆盖 */
button.primary {
    background-color: #007BFF;
    color: white;
}

点击进入全屏，点击退出全屏

结果显示为：

这里是一张图片：

**`:not()`是什么意思？**

:not()伪选择器用于排除选择中的特定元素或类别的元素。它非常适合用于对特定元素或类别的元素之外的所有元素应用样式。

比如说:
</TRANSLATION>

    <ul>
        <li class="done">已完成</li>
        <li>待办</li>
        <li>另一个任务</li>
    </ul>

进入全屏 退出全屏

    /* 除了标记为 'done' 的列表项外，所有列表项的样式 */
    li:not(.done) {
        background-color: #f0f0f0;
    }

    /* 使未完成的项目文本变暗 */
    li.done {
        color: #888;
    }

全屏 退出全屏

就是

:has() 是什么？

:has()伪类允许你根据元素包含的内容来设置其样式。尽管此选择符功能强大，但浏览器支持仍有限。

例子：

    <section>
        <h2>视频部分：</h2>
        <video class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="movie.mp4" controls></video>
        <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="thumbnail.jpg" alt="视频的缩略图">
    </section>
    <section>
        <h2>纯文本部分：</h2>
        <p>这里有一些不含任何媒体的纯文本内容。</p>
    </section>

全屏模式，退出全屏

    /* 包含视频的部分应使用暗背景 */
    section:has(video) {
        background-color: #1a1a1a;
    }

    /* 使含有视频部分内的图片稍微调暗, */
    section:has(video) img {
        filter: brightness(0.8);
    }

进入全屏，退出全屏

结果是：

这里有一张图片。

• :is() 和 :where()：现代浏览器通常支持这些，但请始终查阅最新的兼容性数据。
• :not()：广泛支持，但:not()内的复杂选择器在旧版浏览器中可能无法正常运行。
• :has()：仅限于最新版本的Safari支持，其他浏览器中也有实验性支持。谨慎使用或使用polyfills以实现更广泛的兼容性。

• :is() 和 :where() 具有它们包含的选择器中最高的 specificity，其中 :where() 本身 specificity 为零。
• :not() 的 specificity 和它包含的选择器的 specificity 相同。
• :has() 可能导致复杂的 specificity 问题，因为它依赖于它内部的选择器，但它本身不会直接增加 specificity。

• 用于 DRY CSS：这些选择器可以减少重复，使你的 CSS 更加简洁易维护。
• 考虑性能：复杂的 CSS 选择器可能会影响性能，特别是嵌套的选择器。
• 针对旧版浏览器的备用方案：使用 :has() 时，请确保你有备用方案或使用 @supports 进行特性查询。
• 避免过度使用：虽然功能强大，但不要过度复杂化选择器，因为可读性是关键。

• 组件样式：使用 :is() 和 :where()，为不同按钮类型或表单元素应用通用样式。

• 动态的布局：:has() 可用于实现自适应布局，当某些元素存在时，会改变父元素的样式。

• 响应式设计：可以将这些选择器与媒体查询结合起来，以实现更动态、更适应情境的设计。

高级的 CSS 选择器可以让您的样式表更整洁和高效。注意浏览器的支持情况，特别是在使用 :has() 时，并且要明智地使用这些选择器来增强您的 CSS 效果，而不影响样式表的可维护性。

祝你写代码愉快，愿你的CSS精准得当！🚀

此处内容省略

👋 嘿，你好，我是Eleftheria，社区管理员、开发者、演讲者和创作者，内容创作者。

如果你喜欢这篇文章，不妨分享一下。

🔗 所有链接： | 推特 | LinkedIn