使用“选择器”（不带前导点）来定位包装元素。 #
例如，如果您将图像（或任何子元素）放置在列中，您可能想要设置图像周围的包装器或图像本身的样式。
让我们在各种元素周围放置一个 5px 的实心红色边框，看看会发生什么。
首先，将 Image 小部件拖入一列，然后转到Image > Advanced > Custom CSS
现在，在自定义 CSS 选项卡中，输入以下内容：
selector { border: 5px solid red; }
因为您正在编辑图像小部件，您可能会惊讶地发现边框根本没有围绕图像。相反，它围绕着包装元素，在这种情况下，它是图像所在的列。
要指定子元素，或者在这种情况下为图像，请在自定义 CSS 中输入以下内容：
selector img { border: 5px solid red; }
这将在图像周围放置边框，因为您已指定它应该影响“选择器 img”。
现在用另一个例子试试这个。
将一个 Button 小部件拖到一列中，并给它 10px 的填充，以便您可以很好地看到它周围的列。为此，请转到按钮的高级选项卡，并将所有边的Padding设置为 10。
您的按钮现在应该看起来像这样（您的颜色可能会有所不同）：
接下来，让我们使用自定义 CSS 应用背景颜色。
输入以下内容：
selector { background-color: #ffff00; }
和以前一样，这将应用于按钮元素的包装器，而不是按钮本身。这一次，你会注意到 10px 的 padding 可以防止整个列受到我们样式的影响。
当然，如果您希望将背景颜色应用于按钮而不是其包装，则可以输入以下内容：
selector .elementor-button { background-color: #ffff00; }
这将导致按钮的背景为黄色。
使用选择器 作为 Elementor 的快捷方式，帮助您更快速、更轻松地编写自定义 CSS。但是，您始终可以选择使用您自己的自定义类。
让我们重做按钮背景，但这一次，我们将给按钮一个自定义类，我们将其命名为“so-yellow”。（转到Advanced > CSS Classes并确保您没有在此处包含前面的点）。
现在，在自定义 CSS 选项卡中，我们将简单地引用自定义类“.so-yellow”，而不是使用“选择器”，是的，您需要在此处包含前面的点。
正如预期的那样，按钮的包装现在显示了我们亮黄色的背景。
如果我们以按钮本身为目标会发生什么？
输入以下内容：
.so-yellow .elementor-button { background-color: #ffff00; }
你会注意到按钮的紫色没有改变！
这是因为我们的新样式需要在这种情况下添加一个!important声明。
.so-yellow .elementor-button { background-color: #ffff00 !important; }
现在，我们的样式已应用，我们的按钮再次变为黄色。
只是为了好玩，并且为了防止我们的按钮文本在亮黄色背景中丢失，让我们通过更改文本颜色来完成按钮样式。我们还将为按钮添加边框。无论您使用哪种方法，“selector .elementor-button”或“.so-yellow .elementor-button”，附加代码都是相同的。
selector .elementor-button { background-color: #ffff00; color: #000000; border: 2px solid #000000; }
每当您想快速添加自定义 CSS 以定位该元素的包装器时，都可以享受使用选择器的乐趣。
提示：有关类名列表，请参阅Frank Tielemans 出色的 Widget 类名参考指南
