能否通过Stylelint限制媒体查询内部的选择器嵌套？

当然能搞定这个需求！不过默认的max-nesting-depth规则确实没法精准区分「选择器里套媒体查询」和「媒体查询里套选择器」这两种情况，得用更针对性的Stylelint配置来实现。

先明确你的需求场景 #

你提到的合法（允许保留）的代码是这些：

.classname {
  color: red; /* fine */
  .second-class {
    color: blue; /* also fine */
    .third-class {
      color: green; /* also fine */
    }
  }
  @media (min-width: 100px) {
    color: blue; /* fine */
  }
}

而你想要严格禁止的，是媒体查询内部嵌套新选择器的情况：

@media (min-width: 200px) {
  color: green; /* fine */
  .second-class { /* <-- 这里会被拦截 */
    background-color: blue; /* NOT fine */
    .third-class {
      background-color: blue; /* also NOT fine */
    }
  }
}

简单说就是：允许选择器之间多层嵌套、允许选择器内部嵌套媒体查询，但绝对禁止媒体查询内部嵌套新的选择器（媒体查询里只保留针对父选择器的样式声明是没问题的）。

具体配置方案 #

这里给你两种实用的配置思路，按需选择：

方案1：用selector-nested-pattern精准拦截

Stylelint的selector-nested-pattern规则可以指定嵌套选择器必须匹配的模式，我们可以用它来限制：只有父选择器引用（&）或者直接的样式声明（无选择器）能出现在媒体查询内部，彻底禁止新增选择器的嵌套。

在你的Stylelint配置文件里添加这段配置：

{
  "rules": {
    "selector-nested-pattern": [
      "^&?$",
      {
        "message": "媒体查询内部仅允许编写针对父选择器的样式，禁止嵌套新选择器，请把选择器移到媒体查询外部"
      }
    ]
  }
}

解释下：^&?$这个正则表示，嵌套的选择器只能是&（对应媒体查询里直接写样式的情况，因为Stylelint会把省略&的声明自动识别为父选择器的引用），或者空（直接写样式属性）。这样就能精准拦截所有在媒体查询里新增的选择器（比如.second-class这种）。

方案2：搭配max-nesting-depth控制选择器嵌套深度

如果你还需要同时限制普通选择器的嵌套层数（比如最多允许3层，就像你示例里的.classname > .second-class > .third-class），可以把max-nesting-depth和上面的规则结合起来，同时忽略媒体查询的嵌套层级：

{
  "rules": {
    "max-nesting-depth": [
      3,
      {
        "ignoreAtRules": ["media"] // 媒体查询的嵌套不计算在选择器深度里
      }
    ],
    "selector-nested-pattern": [
      "^&?$",
      {
        "message": "媒体查询内部禁止嵌套新选择器"
      }
    ]
  }
}

效果验证 #

配置完成后，当你写出媒体查询内部嵌套选择器的代码时，Stylelint会立刻抛出你自定义的错误提示；而选择器内部嵌套媒体查询、普通选择器的多层嵌套这些合法场景会被正常放行，完全符合你“让选择器内部嵌套媒体查询成为首选写法”的需求。

内容来源于stack exchange