前言:
今天各位老铁们对“css支持嵌套”可能比较重视,小伙伴们都想要知道一些“css支持嵌套”的相关内容。那么小编同时在网摘上搜集了一些关于“css支持嵌套””的相关知识,希望各位老铁们能喜欢,朋友们快快来了解一下吧!随着Firefox 117版本的发布,原生 CSS 嵌套(Native CSS nesting)已经被所有现代桌面浏览器所支持!,但是请注意,移动端浏览器支持的还很有限。
1.原生 CSS 嵌套
原生 CSS 嵌套可以像 SASS、LESS 预处理器一样,将相关的选择器组合在一起,从而减少需要编写的规则数量,它可以节省打字时间,并使语法更易于阅读和维护。您可以将选择器嵌套到任意深度,但要小心不要超过两层或三层。嵌套深度没有技术限制,但它会使代码更难以阅读,并且生成的 CSS 可能会变得不必要的冗长。
.button { background-color: red; &.warning { background-color: blue; } & .icon { width: 1rem; height: 1rem; }}
虽然原生 CSS 嵌套语法在过去几年中不断发展,使大多数 Web 开发人员感到满意,但不要指望所有 SCSS 代码都能像您期望的那样直接工作。
2.原生 CSS 嵌套规则
您可以将任何选择器嵌套在另一个选择器中,但它必须以符号开头,例如 &, .(类选择器)、#(ID选择器)、@(对于媒体查询)、:、::、+、 ~、 > 或 [。换句话说,它不能是对 HTML 元素的直接引用。下面的代码是无效的,不会对 input 元素选择器进行解析:
.parent { color: red; input { margin: 1em; }}/* Invalid, because "input" is an identifier. */
解决此问题的最简单方法是使用与号 ( &),它以与 Sass 相同的方式引用当前选择器。
2.1.& 符号的使用
.parent { color: red; & input { margin: 1em; } /* use pseudo-elements and pseudo-classes */ &::after {} &:hover {} &:target {}}/* valid, no longer starts with an identifier */
或者,您可以使用其中之一:
> input:只对子元素生效:is(input): 将选择器列表作为参数,并选择该列表中任意一个选择器可以选择的元素:where(input):优先级总是为 0
它们都可以在这个简单的示例中工作,但是稍后您可能会遇到更复杂的样式表的特异性问题。
它还&允许您在父选择器上定位伪元素和伪类。例如:
p.my-element { &::after {} &:hover {} &:target {}}
请注意,& 可以在选择器中的任何位置使用。例如:
.child1 { .parent3 & { color: red; }}
这将转换为以下非嵌套语法:
.parent3 .child1 { color: red; }
您甚至可以在选择器中使用多个 & 符号:
ul { & li & { color: blue; }}
这将以嵌套 <ul> 元素 ( ul li ul) 为目标,但如果您想保持理智,我建议不要使用它!
2.2.@ 符号的使用
嵌套媒体查询示例:
p { color: cyan; @media (min-width: 800px) { color: purple; }}3.原生 CSS 嵌套陷阱3.1.场景一:父选择器包装在 :is() 中
原生 CSS 嵌套将父选择器包装在 :is() 中,这可能会导致与 Sass 输出的差异,比如以下嵌套代码:
.parent1, #parent2 { .child1 { }}
当它在浏览器中解析时,它实际上变成以下内容:
:is(.parent1, #parent2) .child1 {}
Sass 将相同的代码编译为:
.parent1 .child1,#parent2 .child1 {}3.2.场景二:& 符号后置
您可能还会遇到一个更微妙的问题。考虑一下:
.parent .child { .grandparent & {}}
原生 CSS 等效项是:
.grandparent :is(.parent .child) {}
这与以下错误排序的 HTML 元素匹配:
<div class="parent"> <div class="grandparent"> <div class="child">MATCH</div> </div></div>
MATCH变得有样式是因为 CSS 解析器执行以下操作:
它会查找所有元素,其所属类的child祖先也parent为DOM 层次结构中的任何点。
找到包含MATCH的元素后,解析器会grandparent在 DOM 层次结构中的任何位置再次检查它是否具有 — 的祖先。它找到一个并相应地设置该元素的样式。
Sass 中的情况并非如此,它编译为:
.grandparent .parent .child {} 上面的 HTML 没有样式化,因为元素类不遵循严格的grandparent、parent、 和child顺序。
3.3.场景三:字符串替换
Sass 使用字符串替换,因此如下所示的声明是有效的,并且与类的任何元素相匹配 .btn-primary:
.btn { &-primary { color: blue; }}
但是原生 CSS 嵌套会忽略&-space选择器。
4.CSS 预处理器还需要吗?
从短期来看,现有的 CSS 预处理器仍然至关重要。Sass 开发团队宣布,他们将支持 .css 文件中的原生 CSS 嵌套,并按原样输出代码。他们将一如既往地编译嵌套 SCSS 代码,以避免破坏现有代码库,但当全球浏览器支持率达到 98% 时,他们将开始输出 :is() 选择器。
我猜想,PostCSS 插件等预处理器目前会扩展嵌套代码,但随着浏览器支持的普及,就会取消这一功能。当然,使用预处理器还有其他很好的理由,比如将部分代码捆绑到一个文件中,以及对代码进行精简。但如果嵌套是你唯一需要的功能,你当然可以考虑在较小的项目中使用原生 CSS。
总结
CSS 嵌套是最有用、最实用的预处理器功能之一。浏览器供应商努力创造了一个与 CSS 非常相似的原生 CSS 版本,以满足网络开发人员的需求。虽然两者之间存在细微差别,而且在使用(过于)复杂的选择器时可能会遇到不寻常的特殊性问题,但很少有代码库需要进行彻底修改。
原生嵌套可能会让你重新考虑是否需要 CSS 预处理器,但它们仍能提供其他好处。Sass 和类似工具仍然是大多数开发者工具包的重要组成部分。
标签: #css支持嵌套