:is(通用选择器)
CSS中的 :is() 选择器是⼀个功能强⼤的伪类选择器,它⽤于简化复杂的选择器,特别是在处理多个相似的选择器时。:is() 选择器接受 ⼀个选择器列表作为参数,然后匹配列表中任何⼀个选择器所选中的元素。
:is() 选择器核心概念
基本语法
:is(selector1, selector2, ..., selectorN) {
/* 样式规则 */
}
核心特性
简化选择器列表:将多个选择器组合成一个规则
容错机制:忽略无效选择器而不使整个规则失效
优先级计算:采用参数列表中最高的优先级值
嵌套支持:可以嵌套使用多个
:is()
选择器
对比传统方法与 :is() 方法
/* 传统方法 - 冗长且重复 */
header h1,
header h2,
header h3,
section h1,
section h2,
section h3 {
color: #3498db;
}
/* :is() 方法 - 简洁高效 */
:is(header, section) :is(h1, h2, h3) {
color: #3498db;
}
示例:
1、合并多个选择器
如果你想为多个不同的元素应⽤相同的样式,可以使⽤ :is() 来简化选择器:
:is(h1, h2, h3, .special) {
font-weight: bold;
}
2、简化复杂的选择器
:is() 也可以⽤来简化嵌套的选择器,使代码更易读:
article :is(h1, h2, h3) {
color: darkblue;
}
这将选择 article 元素内部的所有 h1、h2、h3 元素,并将它们的⽂本颜⾊设置为深蓝⾊。
3、结合伪类
:is() 可以与伪类结合使⽤:
:is(a, button):hover {
background-color: yellow;
}
这将会选择所有 a 元素和 button 元素在悬浮状态下,为它们设置⻩⾊背景。
完整演示示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS :is() 通用选择器深度解析</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
background: linear-gradient(135deg, #1a2a6c, #b21f1f, #1a2a6c);
padding: 20px;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.95);
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
overflow: hidden;
}
header {
background: linear-gradient(to right, #3498db, #2c3e50);
color: white;
padding: 2rem;
text-align: center;
border-bottom: 5px solid #2980b9;
}
h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.subtitle {
font-size: 1.5rem;
opacity: 0.9;
max-width: 800px;
margin: 0 auto;
}
.content {
display: flex;
flex-wrap: wrap;
padding: 30px;
gap: 30px;
}
.explanation, .demo {
flex: 1;
min-width: 300px;
background: white;
border-radius: 10px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
h2 {
color: #2c3e50;
border-bottom: 3px solid #3498db;
padding-bottom: 10px;
margin-bottom: 20px;
font-size: 2rem;
}
h3 {
color: #3498db;
margin: 15px 0 10px;
}
.code-block {
background: #2c3e50;
color: #ecf0f1;
padding: 15px;
border-radius: 8px;
font-family: 'Courier New', monospace;
margin: 15px 0;
overflow-x: auto;
}
.comment {
color: #95a5a6;
}
.selector {
color: #e74c3c;
}
.property {
color: #3498db;
}
.value {
color: #2ecc71;
}
/* :is() 选择器演示 */
:is(section, article, aside) :is(h2, h3) {
color: #e74c3c;
border-left: 4px solid #e74c3c;
padding-left: 10px;
}
:is(.demo-container, .explanation) p {
line-height: 1.8;
margin-bottom: 15px;
}
:is(.card, .note) {
background: #f9f9f9;
border-radius: 8px;
padding: 15px;
margin: 15px 0;
border-left: 4px solid #3498db;
}
.priority-demo :is(#high-priority, .medium-priority) p {
background-color: #2ecc71;
color: white;
padding: 10px;
border-radius: 4px;
}
/* 优先级演示 */
.priority-demo #high-priority p {
background-color: #e74c3c;
}
/* 容错机制演示 */
:is(.valid, :invalid-selector) p {
background-color: #9b59b6;
color: white;
padding: 10px;
border-radius: 4px;
}
.demo-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.demo-box {
background: #f8f9fa;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
text-align: center;
transition: transform 0.3s, box-shadow 0.3s;
}
.demo-box:hover {
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}
.demo-box h3 {
margin-top: 0;
color: #2c3e50;
}
footer {
text-align: center;
padding: 20px;
background: #2c3e50;
color: white;
margin-top: 30px;
border-top: 5px solid #3498db;
}
.browser-support {
display: flex;
justify-content: center;
gap: 20px;
flex-wrap: wrap;
margin-top: 15px;
}
.browser {
background: #34495e;
padding: 10px 20px;
border-radius: 30px;
font-weight: bold;
}
@media (max-width: 768px) {
.content {
flex-direction: column;
}
h1 {
font-size: 2.2rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>CSS `:is()` 通用选择器</h1>
<p class="subtitle">简化CSS选择器,减少代码冗余,提高可维护性</p>
</header>
<div class="content">
<div class="explanation">
<h2>什么是 :is() 选择器?</h2>
<p><strong>:is()</strong> 伪类函数接受一个选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素。这对于以更紧凑的形式编写大型选择器非常有用。</p>
<div class="card">
<h3>核心优势</h3>
<ul>
<li><strong>简化代码</strong>:减少选择器列表中的重复</li>
<li><strong>容错机制</strong>:忽略无效选择器而不破坏整个规则</li>
<li><strong>优先级处理</strong>:采用参数列表中最高的优先级值</li>
<li><strong>嵌套支持</strong>:支持多层嵌套使用</li>
</ul>
</div>
<h3>语法示例</h3>
<div class="code-block">
<span class="comment">/* 传统方式 */</span><br>
.main <span class="selector">header</span> <span class="selector">h1</span>,<br>
.main <span class="selector">section</span> <span class="selector">h1</span>,<br>
.main <span class="selector">article</span> <span class="selector">h1</span> {<br>
<span class="property">color</span>: <span class="value">#e74c3c</span>;<br>
}<br><br>
<span class="comment">/* 使用 :is() */</span><br>
.main <span class="selector">:is(header, section, article)</span> <span class="selector">h1</span> {<br>
<span class="property">color</span>: <span class="value">#e74c3c</span>;<br>
}
</div>
<h3>优先级规则</h3>
<p>:is() 的优先级由其参数列表中优先级最高的选择器决定:</p>
<div class="code-block">
<span class="comment">/* 优先级 = ID选择器 (1,0,0) */</span><br>
<span class="selector">:is(#header, .main-header)</span> { }<br><br>
<span class="comment">/* 优先级 = 类选择器 (0,1,0) */</span><br>
<span class="selector">:is(.header, div)</span> { }
</div>
</div>
<div class="demo">
<h2>实际演示</h2>
<h3>简化标题样式</h3>
<p>以下标题样式通过 :is() 统一设置:</p>
<div class="demo-container">
<section class="demo-box">
<h2>Section 标题</h2>
<p>这个标题应用了 :is() 设置的样式</p>
</section>
<article class="demo-box">
<h2>Article 标题</h2>
<p>这个标题应用了 :is() 设置的样式</p>
</article>
<aside class="demo-box">
<h3>Aside 子标题</h3>
<p>这个子标题同样应用了 :is() 样式</p>
</aside>
</div>
<h3>优先级演示</h3>
<div class="priority-demo">
<div id="high-priority" class="demo-box">
<h3>ID 选择器</h3>
<p>这个元素有 ID 选择器,优先级更高</p>
</div>
<div class="medium-priority demo-box">
<h3>类选择器</h3>
<p>这个元素只有类选择器</p>
</div>
</div>
<h3>容错机制演示</h3>
<div class="demo-container">
<div class="valid demo-box">
<h3>有效选择器</h3>
<p>这个元素使用了有效的选择器</p>
</div>
<div class="demo-box">
<h3>普通元素</h3>
<p>这个元素没有特殊样式</p>
</div>
</div>
<div class="note">
<h3>浏览器支持情况</h3>
<p>:is() 选择器在现代浏览器中得到良好支持:</p>
<div class="browser-support">
<div class="browser">Chrome 88+</div>
<div class="browser">Firefox 78+</div>
<div class="browser">Safari 14+</div>
<div class="browser">Edge 88+</div>
</div>
</div>
</div>
</div>
<footer>
<p>CSS :is() 通用选择器演示 | 使用现代CSS简化您的样式表</p>
<p>提示::is() 选择器可以替代 :matches() 和 :any()(已弃用)</p>
</footer>
</div>
</body>
</html>
效果展示:
关键特性演示说明
简化选择器:使用
:is(section, article, aside) :is(h2, h3)
统一设置不同容器中的标题样式优先级规则:在优先级演示中,ID选择器(#high-priority)比类选择器(.medium-priority)具有更高优先级
容错机制:在容错演示中,
:is(.valid, :invalid-selector)
规则中的无效选择器被忽略,但有效部分仍然应用实际应用:整个页面的内容区域、卡片和笔记框样式都使用了 :is() 选择器来简化代码
这个演示展示了 :is() 选择器如何显著简化CSS代码,提高可读性和可维护性,同时保持强大的选择能力。现代浏览器对它的支持良好,使其成为现代Web开发中一个实用的工具。