CSS高级选择器：揭秘现代网页设计的利器-原创手记-慕课网

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

介绍

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

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

了解每个选择器：解析 : is()、: where()、: not() 和 : has() 等。
浏览器兼容性：知道哪些浏览器能用这些选择器。
具体性解析：这些选择器如何影响CSS规则的应用效果。
实际示例：这里有一些实际例子，展示如何使用这些选择器来简化你的CSS。
实用技巧：有效使用这些选择器的技巧。

🌟 :is() 语法

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

: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;
}

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

结果显示为：

这里是一张图片： ![](https://imgapi.imooc.com/673fe62b09d2859704370044.jpg)

🌟:not() 选择器

**`: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() 是什么？

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

例子：

    <section>
        <h2>视频部分：</h2>
        <video src="movie.mp4" controls></video>
        <img src="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