html - 如何覆盖被其他类/元素深度嵌套的元素样式？

Question

问题是我无法覆盖类“ant-input-clear-icon”定义的元素上的 CSS 属性。我无法直接访问它，因为它是从图书馆导入的。但是，我假设我可以将嵌套元素包装在 div 中，然后使用 CSS 特异性来选择它/覆盖它。谁能帮忙？

我正在使用 LESS 加载器/CSS 模块。这是标记(由 react 呈现):

<div class="ant_input_clear_icon_Wrapper8JxTE">
 <span class="ant-input-affix-wrapper ant-input-affix-wrapper-lg">
  <span class="ant-input-suffix">
    <i aria-label="icon: close-circle" role="button" tabindex="-1" class="anticon anticon-close-circle 
      ant-input-clear-icon"></i>
  </span>
 </span>
</div>

这是我在 less 模块中的 CSS:

/*Make clear button larger */
.ant_input_clear_icon_Wrapper8JxTE {
  .ant-input-clear-icon {
    font-size: 19px;
  }
}

请注意，这是可行的:

.ant_input_clear_icon_Wrapper {
  i {
    font-size: 19px !important;
  }
}

但似乎应该有更好的方法

Answer 1

尽量把!important

.ant_input_clear_icon_Wrapper8JxTE {
  .ant-input-clear-icon {
    font-size: 19px!important;
  }
}