覆盖 wordpress 模板的内联 css

Question

我想将样式 padding-top:100px 覆盖为 padding-top:0px。我如何覆盖 wordpress 模板中的内联样式？

<!-- Sidebar With Content Section-->
    <div class="with-sidebar-wrapper">
  <section id="content-section-1" >
  <div class="gdlr-full-size-wrapper gdlr-show-all"  style="padding-top: 100px; padding-bottom: 0px;  background-color: #ffffff; "  ><div class="gdlr-master-slider-item gdlr-slider-item gdlr-item"  style="margin-bottom: 0px;"  >
    <!-- MasterSlider -->

我已经在 style.css 中尝试了以下代码，但它不起作用！

.gdlr-full-size-wrapper .gdlr-show-all{
padding-top:0px !important;
}

Answer 1

为了select这个特别的<div>你把你的CSS写成这样：

 .gdlr-full-size-wrapper.gdlr-show-all {

 } /*without space between*/

您正在使用

 .gdlr-full-size-wrapper .gdlr-show-all {

 }

viz selecting

<div class="gdlr-full-size-wrapper">
   <div class="gdlr-show-all"></div>
</div>

此外，如果您愿意覆盖 inline CSS，那么您可以使用 [style] select 或者也可以。

作为：

<div class="someClass" style="font-size:10px; "></div>

所以我们可以这样写 CSS：

.someClass[style] { font-size:14px !important}

这里的技巧是 CSS 仅在 someClass 对 font 具有 inline CSS 时有效。

Answer 2

使用以下代码，如果您在 div 标签上有一个或两个类，则这两种情况都适用。

.gdlr-full-size-wrapper.gdlr-show-all, .gdlr-full-size-wrapper .gdlr-show-all
{
 padding-top:0px !important;
}

Answer 3

Justinas 解释得很好，应该可以完美运行，我已将其应用于 WordPress 主题的自定义 CSS，并且对我有用。我在更改时遇到的 CSS 内联 div.

覆盖 wordpress 模板的内联 css

Overriding Inline css of wordpress template

css

wordpress

element

inline

stylesheet