如何使用本机 WordPress 自定义>附加 CSS 来设置特定 ELEMENTOR 部分的样式?

发布于 2025-01-12 03:17:30 字数 791 浏览 1 评论 0原文

.elementor-widget-image{
   display: none;
   }
<div class="elementor-element elementor-element-6806127 elementor-widget elementor-widget-image" data-id="6806127" data-element_type="widget" data-widget_type="image.default">

<div class="elementor-element elementor-element-6806127 elementor-widget elementor-widget-image" data-id="6806127" data-element_type="widget" data-widget_type="image.default">

同一元素或主题中的其他页面使用了我在其中添加了一个部分的确切 HTML 代码。

当我使用 .elementor-widget-image 设置预期页面的样式时,此样式将应用于具有此类部分的所有其他页面。

我试图定位 ID(即 data-id"6806127"),以便样式仅影响此页面。

请帮忙。

.elementor-widget-image{
   display: none;
   }
<div class="elementor-element elementor-element-6806127 elementor-widget elementor-widget-image" data-id="6806127" data-element_type="widget" data-widget_type="image.default">

<div class="elementor-element elementor-element-6806127 elementor-widget elementor-widget-image" data-id="6806127" data-element_type="widget" data-widget_type="image.default">

Other pages within this same elementor theme make use of this exact HTML code where I added a section.

When I style the intended page using the .elementor-widget-image, this style is applied to every other page that has a section like this.

I am trying to target the ID(ie. data-id"6806127") so that the styling affects only this page.

Please help.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

棒棒糖 2025-01-19 03:17:30

您可以直接使用 data 属性 作为 CSS 选择器来设置其样式

[data-id="6806127"] {
    /* Styles */
}

工作示例

[data-id="6806127"] {
  background: red
}
<div class="elementor-element elementor-element-6806127 elementor-widget elementor-widget-image" data-id="6806127" data-element_type="widget" data-widget_type="image.default">abc</div>

You can just use the data attribute directly as CSS selector to style it

[data-id="6806127"] {
    /* Styles */
}

Working Example

[data-id="6806127"] {
  background: red
}
<div class="elementor-element elementor-element-6806127 elementor-widget elementor-widget-image" data-id="6806127" data-element_type="widget" data-widget_type="image.default">abc</div>

信愁 2025-01-19 03:17:30

最好的方法是

  1. 通过导航到 Edit {Element Name} 为节、列或模块分配自定义类>高级> CSS 类
  2. 使用 Inspect Element 来识别您要定位的相关类和标记
  3. 外观>定制>其他 CSS

或者,您可以使用 Elementor Pro 并在“高级”选项卡中为每个特定模块编写 CSS

The best way is to

  1. Assign the section, column OR the module a custom class by navigating to Edit {Element Name} > Advanced > CSS Classes
  2. Use Inspect Element to Identify the relevant class and tag that you will be targeting
  3. Write the required CSS in Appearance > Customize > Additional CSS

Alternatively, you can go with Elementor Pro and Write the CSS for each specific module in the "Advanced" tab

海风掠过北极光 2025-01-19 03:17:30

如果你想让你的CSS只影响1个页面,你可以使用wordpress生成的页面id。当您检查元素并转到主体类时,您可以在主体上看到一个类似 .page-id-103 的类。该 ID 每页都是唯一的,您可以将其用作 css 示例的第一个选择器:

body.page-id-100 .elementor-widget-image{
   display: none;
}

If you want your css to affect only a 1 page, you can use the page id generated by wordpress. When you inspect element and go to body class you can see a class on the body like this .page-id-103. This ID is unique per page, you can use it as a first selector of your css example:

body.page-id-100 .elementor-widget-image{
   display: none;
}

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文