新一代 CSS 选择器:12 个技巧让代码量减少 70%

开发
本文分享一些新一代的CSS选择器技巧,这些技巧不仅能让你的代码更简洁,还能提升样式表的可维护性。

CSS选择器的使用技巧直接影响着我们的代码质量和维护效率。分享一些新一代的CSS选择器技巧,这些技巧不仅能让你的代码更简洁,还能提升样式表的可维护性。

1. :is() 选择器:组合选择的神器

:is()选择器可以将多个选择器分组,大幅减少重复代码。

/* 之前的写法 */
header p, main p, footer p {
    line-height: 1.6;
}

/* 使用:is()的写法 */
:is(header, main, footer) p {
    line-height: 1.6;
}

2. :where() 选择器:零特异性的福音

:where()的功能类似:is(),但特异性为0,让样式更容易被覆盖。

/* 特异性较高 */
article :is(header, footer) p {
    color: #333;
}

/* 特异性为0,更容易覆盖 */
article :where(header, footer) p {
    color: #333;
}

3. :has() 关系选择器:父元素选择的革命

:has()让我们终于可以基于子元素选择父元素。

/* 选择包含图片的段落 */
p:has(img) {
    display: flex;
    align-items: center;
}

/* 选择后面有标题的段落 */
p:has(+ h2) {
    margin-bottom: 2em;
}

4. 属性选择器通配符匹配

使用属性选择器的通配符匹配可以更灵活地选择元素。

/* 选择所有数据属性 */
[data-*="important"] {
    font-weight: bold;
}

/* 选择特定语言的元素 */
[lang|="en"] {
    font-family: 'Arial', sans-serif;
}

5. :nth-child() 进阶用法

使用公式选择特定元素,实现复杂的选择模式。

6. :not() 多条件排除

新版:not()支持多个选择器,大大增强了排除能力。

7. 层叠层级管理 @layer

使用@layer管理样式优先级,减少特异性战争。

8. :focus-visible 智能焦点

更智能的焦点状态管理,减少不必要的轮廓样式。

9. :empty 空元素处理

优雅处理空元素,无需额外的类名标记。

10. 相邻兄弟选择器组合

灵活使用+和~选择器,处理元素间关系。

11. 复合选择器优化

组合多个选择器条件,实现精确匹配。

12. 媒体查询容器

使用容器查询,实现更精确的响应式设计。

@container sidebar (min-width: 400px) {
    .widget {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}
责任编辑:赵宁宁 来源: JavaScript
相关推荐

2014-09-16 14:09:29

中科曙光服务器

2012-07-02 10:36:19

菲亚特

2022-03-10 16:01:29

Playwright开源

2011-12-13 14:23:30

IBM

2009-10-23 15:53:22

服务器

2009-11-17 15:24:38

GPON路由器

2013-01-04 16:15:08

微软ERPDynamics AX

2022-03-10 08:01:06

CSS技巧选择器

2022-11-24 10:34:05

CSS前端

2011-10-24 10:30:20

CSS

2016-01-26 11:58:12

2009-03-20 11:12:32

HX 路由器产品Hughes

2011-03-31 17:49:51

微软嵌入式WindowsEmbe

2009-03-11 13:02:20

存储虚拟化数据中心

2010-06-17 16:54:49

新一代Hotmail

2009-09-02 16:10:40

ADSL技术

2018-06-01 15:18:43

LinuxOrbital App开源

2017-10-19 16:21:02

SCM存储技术

2012-01-11 10:14:46

云计算服务保障云选择

2009-10-13 10:04:51

医院协同呼叫中心
点赞
收藏

51CTO技术栈公众号