将近20年,CSS终于在所有现代浏览器实现了原生嵌套语法!!!-3

简介: 使用&进行精确控制和灵活性假设您想要选择.demo元素,并使用:not()选择器。这时就需要使用&:
使用&进行精确控制和灵活性

假设您想要选择.demo元素,并使用:not()选择器。这时就需要使用&

.demo {
  &:not() {
    ...
  }
}

这将.demo:not()合并为.demo:not(),与之前的示例.demo :not()不同。这一点非常重要,当您想要嵌套:hover交互时,需要特别注意。

.demo {
  &:hover {
    /* .demo:hover */
  }
  :hover {
    /* .demo :hover */
  }
}

更多嵌套示例

CSS嵌套规范中包含了更多示例。如果您想通过示例了解更多关于语法的内容,该规范涵盖了各种有效和无效的示例。

接下来的几个示例将简要介绍CSS嵌套的更多特性,帮助您了解其广泛的功能。

嵌套@media

在样式表中,如果要修改选择器及其样式的媒体查询条件位于不同的地方,这可能会分散注意力。使用嵌套,您可以将媒体查询条件直接嵌套在上下文中。

为了方便起见,如果嵌套的媒体查询仅修改当前选择器上下文的样式,则可以使用最简化的语法。

.card {
  font-size: 1rem;
  @media (width >= 1024px) {
    font-size: 1.25rem;
  }
}

使用&也可以:

.card {
  font-size: 1rem;
  @media (width >= 1024px) {
    &.large {
      font-size: 1.25rem;
    }
  }
}

这个示例展示了使用&的扩展语法,同时也针对.large

卡片进行了定位,以展示继续工作的其他嵌套特性。

了解更多关于嵌套@media的内容。

任意嵌套

到目前为止,所有的示例都是在前一个上下文中继续或附加选择器。如果需要,您可以完全更改或重新排列上下文。

.card {
  .featured & {
    /* .featured .card */
  }
}

&符号表示选择器对象的引用(不是字符串),可以放置在嵌套选择器的任何位置。甚至可以多次放置:

.card {
  .featured & & & {
    /* .featured .card .card .card */
  }
}

虽然这个示例看起来有点没有用,但在某些情况下,能够重复选择器上下文是很方便的。

无效的嵌套示例

在嵌套中,有几种语法场景是无效的,如果您之前使用预处理器进行嵌套,可能会对此感到惊讶。关于有效嵌套语法的速查表可以在本文的理解嵌套解析器部分找到。

嵌套元素标签名

HTML元素目前需要在前面加上&符号或使用:is()进行包装。

.card {
  h1 {
    /* 🛑 h1 does not start with a symbol */
  }
}

通过以下语法进行修复:

.card {
  & h1 {
    /* ✅ now h1 starts with a symbol */
  }
  /* or */
  :is(h1) {
    /* ✅ now h1 starts with a symbol */
  }
}

嵌套和连接

许多CSS类命名约定依赖于嵌套能够像连接字符串一样连接或附加选择器。但在CSS嵌套中,这种方法是无效的,因为选择器不是字符串,而是对象引用。

.card {
  &--header {
    /* is not equal to ".card--header" */
  }
}

更详细的解释可以在规范中找到。

混合嵌套和声明

考虑以下嵌套的CSS块:

.card {
  color: green;
  & { color: blue; }
  color: red;
}

.card元素的颜色将是蓝色。

所有混合的样式声明都会被提升到顶部,就好像它们是在嵌套之前编写的一样。更多细节可以在规范中找到。

理解嵌套解析器

要在CSS嵌套中取得最好的效果,我们可以研究解析器在处理嵌套时的工作原理。了解这一点,我们可以自信地嵌套样式,而不必经常查找规则。

首先,最简单的方法是识别触发解析器开始消耗嵌套样式的符号。

& @ : . > ~ + # [ *

这些符号应该看起来很熟悉。其中一些是组合器,一些是选择器。所以最简单的情况是,如果解析器发现您的嵌套选择器,并且它不以这些符号之一开头,它将失败,并错误地消耗您的样式。

![& @ : . > ~ + # *. 嵌套选择器以这些符号之一开头吗?如果是,则有效。如果不是,则无效。

image.png

功能检测

有两种非常好的方法来检测CSS嵌套:使用嵌套或使用@supports检查

使用嵌套:

html {
  .has-nesting {
    display: block;
  }
  .no-nesting {
    display: none;
  }
}

使用@supports检查:

@supports not ((nesting: normal)) {  /* 在这里使用传统的样式 */}

这两种方法都依赖于嵌套的nesting功能。在支持的浏览器中,第一个嵌套示例将起作用,而第二个示例将被忽略。在不支持嵌套的浏览器中,情况正好相反。

总结

CSS嵌套使开发者能够以更直观和组织良好的方式编写样式规则。它有助于减少代码重复、提高可读性,并提供更好的维护性和重构能力。

使用嵌套时,确保理解如何正确放置选择器和使用&符号来连接或附加选择器。此外,熟悉无效的嵌套示例,以避免错误。

在实际使用CSS嵌套时,请记住进行功能检测,并考虑适当的回退或替代方案,以确保在不支持嵌套的浏览器中也能提供一致的体验。

最后,请记住,嵌套应该是有意义的,并且应该提高代码的可读性和可维护性。避免过度使用嵌套,以免引入样式的复杂性和性能问题。使用嵌套时,请遵循一致的命名约定和最佳实践,以确保团队成员可以轻松理解和维护代码。

参考

目录
相关文章
|
2月前
|
前端开发
css的语法
【4月更文挑战第12天】css的语法
22 2
|
7天前
|
前端开发
CSS全部标签属性重置语法
每个浏览器默认的属性不同,像谷歌浏览器不设置的话,默认每个元素是有外边距margin的,有的浏览器列表还会带上序号,有的浏览器就没有。
15 6
|
8天前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
15 0
|
12天前
|
前端开发 JavaScript
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
js 进入浏览器全屏(F11效果)、退出全屏、指定元素全屏、判断当前是否全屏、监听浏览器全屏事件、定义全屏时的css样式(全屏伪类)
12 0
|
2月前
|
前端开发
CSS分组和嵌套选择器
CSS分组和嵌套选择器。
25 1
|
2月前
|
前端开发
CSS 语法
【5月更文挑战第3天】CSS 语法。
35 10
|
2月前
|
前端开发
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
【Web前端】CSS基本语法规范和引入方式&&常见选择器用法&&常见元素属性
|
2月前
|
前端开发 JavaScript 索引
CSS常见用法 以及JS基础语法
CSS常见用法 以及JS基础语法
31 0
|
2月前
|
前端开发
CSS的语法是用来定义网页中元素样式的规则集合
【4月更文挑战第6天】CSS的语法是用来定义网页中元素样式的规则集合
27 5
|
2月前
|
前端开发
CSS的常用语法
【4月更文挑战第7天】CSS的常用语法
17 3