Less支持哪些高级CSS选择器嵌套写法？-css教程-PHP中文网

属性选择器嵌套必须用&[data-open="true"]才能绑定父级，漏写&会编译为全局规则；&不是可选语法糖，而是强制标记，如.nav{&[data-open="true"]{}}输出.nav[data-open="true"]。

less支持哪些高级css选择器嵌套写法？

属性选择器嵌套必须带 `&` 才能绑定父级

直接写 [data-open="true"] 会脱离上下文，编译成全局规则；必须用 &[data-open="true"] 才能拼出 .nav[data-open="true"] 这样的完整选择器。漏掉 & 是最常见错误，它不是语法糖，而是强制绑定标记。

常见陷阱：

.nav { [data-open] { ... } } → 编译为 [data-open]（全局匹配）
.nav { &[data-open] { ... } } → 正确输出 .nav[data-open]
多个属性要连写：&[data-open="true"][data-anim]，中间不能有空格
&:hover[data-open] 是合法的，但拆成 &:hover { [data-open] { ... } } 就失效了

`&` 在伪类/伪元素中必须紧贴，不能有空格

&:hover 和 &::before 是标准写法；& :hover（带空格）会被当成后代选择器，编译成 .btn :hover，匹配的是按钮内部任意悬浮元素，不是按钮自身。

实操要点：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

伪类、伪元素必须以 & 开头，且中间无空格
&.is-active:hover → .btn.is-active:hover
&__header::before → .card__header::before
想给父元素加伪元素，别依赖嵌套层级，显式写 .card::before 更可靠

子选择器 `>` 要显式声明，避免意外生成后代选择器

写 > .item 会编译为 .list > .item；而只写 .item 默认是后代选择器 .list .item。后者权重更高、匹配更宽泛，容易误命中深层 DOM。

为什么这很重要：

视觉缩进 ≠ 语义层级，Less 不会自动把缩进转成 >
.menu { .item { ... } } → .menu .item（权重 0,1,1）
.menu { > .item { ... } } → .menu > .item（权重同上，但匹配更精确）
响应式或状态切换时，> 能避免样式泄漏到嵌套更深的子项

BEM 命名必须靠 `&__xxx` 主动构建，不能靠嵌套推导

嵌套三层如 .modal { .header { .title { ... } } } 会生成 .modal .header .title，不是你想要的 .modal__title。BEM 的扁平类名必须靠 & 显式拼接。

正确姿势：

.card { &__header { ... } &__body { ... } } → .card__header、.card__body
&__footer.is-expanded → .card__footer.is-expanded
不要写 .card { .footer { ... } } 期望它变成 .card__footer，它不会
DOM 结构固定且深时，优先提取独立类名（如 .table-cell-actions），而非靠嵌套模拟

嵌套本身不压缩、不降权、不隔离——它只是语法糖，最终 CSS 的特异性、体积、可覆盖性，全由编译后那串选择器字符串决定。最容易被忽略的，是开发者一边写嵌套，一边以为“缩进浅=权重低”，结果生成了 .page .layout .content .section .item 这种七级选择器，连 !important 都救不回来。