LESS - 如何按类名选择深度嵌套的元素？答案

【问题标题】：LESS - How to select a deeply nested element by class name?LESS - 如何按类名选择深度嵌套的元素？
【发布时间】：2020-06-29 02:16:51
【问题描述】：

我正在使用一个依赖于 Less 的 CSS 库。为了覆盖某个元素的 CSS 属性，我试图通过包装父元素“commentPaddingFix”来使用更高程度的特异性技术：

<div class='commentPaddingFix'>
  <div class='Child1'>
     <div class='Child2'>
       <div class='ant-comment-inner'>
       </div>
     </div>
  </div>
</div>

在 Less 文件中：

.commentPaddingFix {
  .ant-comment-inner {
    padding-bottom: 0px !important;
    padding-top: 0px !important;
  }
}

当您知道要针对任意数量的嵌套父元素的元素的类名时，我需要一个有效的解决方案。我不能使用第 n 个子技术，因为子编号因渲染而异。

【问题讨论】：

这是一种愚蠢的 hack，但您可以通过重复相同的选择器来增加特异性：.commentPaddingFix.commentPaddingFix.commentPaddingFix { ... }
您的 Less 示例有什么问题？为什么不只是.commentPaddingFix .ant-comment-inner { ... }？
如果您在开发工具中检查元素，您是否看到您的规则，它们只是不够具体？如果是这样，请尝试重复我上面评论中的外部选择器。
您的类名是否正确且在输出标记中可见？
你在使用 css 模块吗？您的班级名称是否未修改地显示在 dom 中？

标签： html css reactjs less

【解决方案1】：

我不知道 Less，但如果它像 Sass 一样有效，那么你的解决方案应该有效。

这是纯 CSS 的样子：https://codesandbox.io/s/condescending-bhaskara-3781k。

【讨论】：