新一代CSS选择器：12个技巧让代码量减少70%
<p>CSS选择器的使用技巧直接影响着我们的代码质量和维护效率。分享一些新一代的CSS选择器技巧，这些技巧不仅能让你的代码更简洁，还能提升样式表的可维护性。</p><h2>1. :is() 选择器：组合选择的神器</h2>
<p><code>:is()</code>选择器可以将多个选择器分组，大幅减少重复代码。</p>
<pre><code>/* 之前的写法 */
header p, main p, footer p {
line-height: 1.6;
}
/* 使用:is()的写法 */
:is(header, main, footer) p {
line-height: 1.6;
}
</code></pre>
<h2>2. :where() 选择器：零特异性的福音</h2>
<p><code>:where()</code>的功能类似 <code>:is()</code>，但特异性为0，让样式更容易被覆盖。</p>
<pre><code>/* 特异性较高 */
article :is(header, footer) p {
color: #333;
}
/* 特异性为0，更容易覆盖 */
article :where(header, footer) p {
color: #333;
}
</code></pre>
<h2>3. :has() 关系选择器：父元素选择的革命</h2>
<p><code>:has()</code>让我们终于可以基于子元素选择父元素。</p>
<pre><code>/* 选择包含图片的段落 */
p:has(img) {
display: flex;
align-items: center;
}
/* 选择后面有标题的段落 */
p:has(+ h2) {
margin-bottom: 2em;
}
</code></pre>
<h2>4. 属性选择器通配符匹配</h2>
<p>使用属性选择器的通配符匹配可以更灵活地选择元素。</p>
<pre><code>/* 选择所有数据属性 */
{
font-weight: bold;
}
/* 选择特定语言的元素 */
{
font-family: 'Arial', sans-serif;
}
</code></pre>
<h2>5. :nth-child() 进阶用法</h2>
<p>使用公式选择特定元素，实现复杂的选择模式。</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/btsCOHx9LANyAZBAja6hXLc4oklSS0CnUTpXF8woVNxMJnbGuDic2r19zT8H3ezwTZ086m8ckm4lQ8eVWt6Webg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>6. :not() 多条件排除</h2>
<p>新版 <code>:not()</code>支持多个选择器，大大增强了排除能力。</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/btsCOHx9LANyAZBAja6hXLc4oklSS0CnoMXjUo7Biatyicewfdc0glzqfQTcMkaEejWBcGlWJc3KjJHjWdOBdGwg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>7. 层叠层级管理 @layer</h2>
<p>使用 <code>@layer</code>管理样式优先级，减少特异性战争。</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/btsCOHx9LANyAZBAja6hXLc4oklSS0CnqMiaBic5Im7pUOwsOoFnulKYdvkfV5WNOEOxZNq3psP77fDD6vZTVDkA/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>8. :focus-visible 智能焦点</h2>
<p>更智能的焦点状态管理，减少不必要的轮廓样式。</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/btsCOHx9LANyAZBAja6hXLc4oklSS0CnUC2GJhrf5qWZicSxHcapQysK8V40IusciaqEvRSbRicicdF3eiaXq5yH4Vw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>9. :empty 空元素处理</h2>
<p>优雅处理空元素，无需额外的类名标记。</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/btsCOHx9LANyAZBAja6hXLc4oklSS0CnQuQGiceiaQIVUIGSF3hLD6Liby5OOHrln8SlHDoE2NXdzkicCyFEAkvjTw/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>10. 相邻兄弟选择器组合</h2>
<p>灵活使用 <code>+</code>和 <code>~</code>选择器，处理元素间关系。</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/btsCOHx9LANyAZBAja6hXLc4oklSS0CnSaxuvSvUMibr7KS7fZNwyOd21jdS3SJOCuF8orTZiaaXGhekr1iboMtgg/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>11. 复合选择器优化</h2>
<p>组合多个选择器条件，实现精确匹配。</p>
<p><img src="https://www.3bbs.cn/index-diy/img.php?url=https://mmbiz.qpic.cn/sz_mmbiz_png/btsCOHx9LANyAZBAja6hXLc4oklSS0CnWTjYS4dJTcnEJ13dnSqjXbzb46VicTY1fzMial89AuoqJOq6JXHwWIRQ/640?wx_fmt=png&from=appmsg&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1" alt="图片" /></p>
<h2>12. 媒体查询容器</h2>
<p>使用容器查询，实现更精确的响应式设计。</p>
<pre><code>@container sidebar (min-width: 400px) {
.widget {
display: grid;
grid-template-columns: 1fr 1fr;
}
}
</code></pre>
<p>欢迎补充。</p>
页:
[1]