如何移除Elementor容器周围的多余项目符号并保留原有列表样式？

问题现象 #

在Elementor中使用以下两段CSS自定义列表项目符号后，Elementor编辑器的容器周围也出现了相同的项目符号，导致编辑器无法正常工作。且无法删除现有CSS，否则内容布局会出现问题：

使用的CSS代码：

ul { list-style : none }

li::before {
  content     : "•";
  color       : #07B118;
  display     : inline-block; 
  width       : 1em;
  margin-left : -1em
}    

ul { list-style: none }

li:before { 
  content   : "•"; 
  font-size : 23pt; 
}

}

问题原因 #

当前CSS是全局作用于所有<ul>和<li>元素，而Elementor编辑器本身的界面组件（比如容器的控制框架、侧边栏元素）也大量使用了<ul>和<li>标签，因此被误应用了自定义项目符号样式，导致编辑器异常。

解决方案 #

方案1：给目标列表添加专属类（推荐） #

这种方式精准控制样式作用范围，不会影响Elementor编辑器或其他无关列表：

1. 在Elementor编辑器中，选中需要自定义符号的列表模块，在「高级」选项卡中添加自定义类名，比如custom-bullet-list
2. 修改原有CSS为以下代码（合并两段冗余代码，只作用于目标列表）：

/* 仅作用于带有custom-bullet-list类的列表 */
.custom-bullet-list {
  list-style: none;
}
.custom-bullet-list li::before {
  content: "•";
  color: #07B118;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  font-size: 23pt;
}

方案2：排除Elementor编辑器内的元素 #

如果无法修改列表的类名，可通过Elementor编辑状态的专属类，排除编辑器内的容器元素：

/* 保留原有自定义列表样式 */
ul { list-style : none }
li::before {
  content     : "•";
  color       : #07B118;
  display     : inline-block; 
  width       : 1em;
  margin-left : -1em;
  font-size: 23pt;
}

/* 编辑状态下，移除Elementor容器的自定义符号 */
.elementor-editor-active .elementor ul {
  list-style: revert !important;
}
.elementor-editor-active .elementor li::before {
  content: none !important;
}

注：.elementor-editor-active是Elementor编辑器激活时的全局类，该规则仅在编辑页面时生效，不会影响网站前端的显示效果。

内容的提问来源于stack exchange，提问作者Somayeh