重构CSS以减少相邻类

Question

是否有一种方法可以减少包含大量相邻类的样式表的文件大小。例如..。

body .elementor-2 .elementor-element.elementor-element-949d9dd .elementor-widget-spacer,
body .elementor-2 .elementor-element.elementor-element-427933f .elementor-widget-spacer,
body .elementor-2 .elementor-element.elementor-element-cb8ce37 .elementor-widget-spacer {
margin-bottom: 0px;
}

Answer 1

使用:正在选择减少代码，请检查。要了解更多关于it的信息，这里

​

body .elementor-2 .elementor-element:is(.elementor-element-949d9dd, .elementor-element-427933f, .elementor-element-cb8ce37  ) .elementor-widget-spacer  {
margin-bottom: 10px;
  background: red
}

<div class="elementor-2">
  <div class="elementor-element elementor-element-949d9dd ">
    <div class="elementor-widget-spacer">spacer</div>      
  </div>      
</div>
<div class="elementor-2">
  <div class="elementor-element elementor-element-427933f">
    <div class="elementor-widget-spacer">spacer</div>      
  </div>      
</div>
<div class="elementor-2">
  <div class="elementor-element elementor-element-cb8ce37 ">
    <div class="elementor-widget-spacer">spacer</div>      
  </div>      
</div>

​

Answer 2

如果您以不同的位置使用小部件间隔器，那么每个小部件都会使用不同的ids来生成这些类。所以你不能减少课程。

因此，如果您不需要编写CSS文件上的所有类。

使用这个CSS。

body .elementor-widget-spacer {
   margin: 0 !important;
}

或

body .elementor-widget-spacer {
   margin: 0;
}

它与网页上的所有间隔部件一起工作。

Answer 3

如果您正在使用elementor.you，则不需要使用自定义CSS。Elementor对此有一个专用的控件。编辑该列，选择layout选项卡查找小部件空间，并使其为0。在列中，您的小部件间隙将为0。做0之前

在做0之后

或者您没有使用Elementor您可以使用:is().To了解更多关于它的内容，请参阅文章这里