CSS 选择器：解锁现代网页设计的高级选择器-css教程-PHP中文网

大家好！欢迎来到我的博客。？

介绍

今天，我们将深入了解高级 CSS 选择器的世界。这些选择器，如 :is()、:where()、:not() 和 :has()，由于其特殊性规则或浏览器支持问题，一开始可能看起来有点棘手，但它们是超级强大的工具创建更高效、更动态的 CSS。让我们一起探索这些选择器，了解它们的工作原理，查看它们的实际效果，并讨论一些其他的细微差别。

您将在本文中学到什么

理解每个选择器：分解 :is()、:where()、:not() 和 :has()。
浏览器支持：了解哪些浏览器支持这些选择器。
特异性见解：这些选择器如何影响 CSS 规则应用。
实际示例：真实世界的用例，展示这些选择器如何简化您的 CSS。
最佳实践：有效使用这些选择器的提示。

？ :is() 选择器

什么是 :is() ？

:is() 伪类函数允许您将样式应用于多个选择器，而无需重复相同的属性。它对于对具有不同特异性的选择器进行分组特别有用。

示例：

<div>





<pre class="brush:php;toolbar:false">: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; }

登录后复制

结果：所有警报类型均采用粗体和边框，颜色由其特定类别定义。

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design

？提示：您可以复制粘贴 Codepen 上的所有示例，以查看实际结果。

？ :where() 选择器

什么是 :where() ？

类似于 :is()、:where() 分组选择器，但它的特异性为 0，非常适合创建易于覆盖的样式。

示例：

<button>





<pre class="brush:php;toolbar:false">/* Button styles with low specificity */
:where(button, input[type="button"], input[type="submit"]) {
    font-size: 1rem;
    padding: 0.5em 1em;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

/* Specific override for primary buttons */
button.primary {
    background-color: #007BFF;
    color: white;
}

登录后复制

结果：

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design

？ :not() 选择器

什么是 :不是() ？

:not() 伪类用于从选择中排除某些元素。它非常适合将样式应用于除特定元素或类之外的所有内容。

示例：

<ul>
    <li>





<pre class="brush:php;toolbar:false">/* Style all list items except those marked as 'done' */
li:not(.done) {
    background-color: #f0f0f0;
}

/* Darken the text for completed items */
li.done {
    color: #888;
}

登录后复制

结果：

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design

？ :has() 选择器

什么是 :has() ？

:has() 伪类允许您根据元素包含的内容设置元素的样式。这个选择器非常强大，但在撰写本文时浏览器支持有限。

示例：

<div>





<pre class="brush:php;toolbar:false">: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; }

登录后复制

<button>





<pre class="brush:php;toolbar:false">/* Button styles with low specificity */
:where(button, input[type="button"], input[type="submit"]) {
    font-size: 1rem;
    padding: 0.5em 1em;
    background-color: #f0f0f0;
    border: none;
    cursor: pointer;
}

/* Specific override for primary buttons */
button.primary {
    background-color: #007BFF;
    color: white;
}

登录后复制

结果：

CSS Selectors: Unlocking Advanced Selectors for Modern Web Design