css 样式被 element.style 覆盖

Posted 2023-03-06

【中文标题】css 样式被 element.style 覆盖

【英文标题】：css style is getting overwritten by element.style

【发布时间】：2022-01-21 04:50:13

【问题描述】：

我有一个带有箭头按钮的图像幻灯片（CSS 样式 slidePrev 和 slideNext）。但是，我无法让按钮显示在图像的中间，而是显示在顶部。

这是应该可以工作的 CSS 代码

#fwslider .slideNext 
    position: absolute;
    top:50%;
    right:-50px;
    z-index: 10;

但是，这种样式不知何故被称为 element.style 的东西（可能来自 Bootstrap？）覆盖。 Chrome 不知道来源在哪里：

有谁知道是什么覆盖了我的风格？我什至不知道如何调试它，所以任何提示都值得赞赏。

【问题讨论】：

element.style 应该是页面 html 中的硬编码样式，肯定是在被检查的元素中。在 html 源代码中检查其内容。在其中寻找类似style="right: 0px; top:-52px;opacity:0.5" 的内容。

如果一切都失败了，你可以尝试用 !important 覆盖它。顶部：50% ！重要；右：-50px !important;

【参考方案1】：

关于你的问题：有谁知道是什么覆盖了我的风格？答案是element.style...但是element.style是什么？

正如在另一个 SO 问题中所说：What is element.style and why is it overriding my css settings?

element.style 指的是 dom 元素上的内联样式。

在您的情况下，element.style 应该是页面 html 中的硬编码样式，肯定是在 button 元素中。 在 html 源代码中检查其内容并寻找类似这样的内容：

<button class="slideNext" style="right: 0px; top:-52px;opacity:0.5">

一旦找到，您可以根据需要删除、添加或修改其内容。

此外，您可以在 fwslider.css 文件中编辑 CSS 外部样式并将 !important 规则添加到受影响的样式强制它们覆盖当前的内联样式行为，但最好避免在内联文档元素中使用style=，以避免这种误解并将结构（html）与布局（样式）分开。

关于顺序优先添加样式时检查What is the order of precedence for CSS?，其中说：

有几个规则（按此顺序应用）：

内联 css（html 样式属性）覆盖样式标签和 css 文件中的 css 规则 更具体的选择器优先于不太具体的选择器 如果两者具有相同的特异性，代码中稍后出现的规则会覆盖之前的规则。 带有 !important 的 css 规则始终优先。

重要

这些规则同样适用于!important规则，所以它的优先级也是如此。

---

更新：如果 javascript 管理 css 属性会发生什么？

使用 jquery 或 vanilla javascript 管理 css 属性会导致 element.style 属性的添加、修改或删除。所以它会影响浏览器查看它的方式，并且更改将出现在element.style内的inspector中。

按实例：如果我们执行这个 jquery 函数：

$('#fwslider).css('top','-52px');

它将在#fwslider元素内添加或修改属性style=的当前值。

在执行 javascript 代码之前：

javascript代码执行后：

因此，请考虑如果您没有在 html 代码文件中找到特定的 css 属性，但它会出现在浏览器检查器的 element.style 中，那么它可以由javascript代码生成。

【讨论】：

感谢您解释发生了什么，我现在明白了通用 element.style 的含义。我在整个代码块中搜索了 -52 并且毫不奇怪地没有找到它。我相信它在幻灯片放映期间由一些 Javascript 动态设置。使用 !important 会有所帮助，但我仍然遇到问题，我将在另一个回复中概述。非常感谢您的帮助和解释。

更新：我要概述的问题是由于幻灯片中缺少第一张图片引起的。不知道为什么它会导致问题，但不是追踪它“如果”，我只是确保图像都带有 alt 标签，这样我就可以很容易地看到它丢失了

@SteveSilberberg：我已经更新了我的答案，添加了关于内联 css 样式的 javascript 行为的新解释（似乎是你的情况）。

【参考方案2】：

您可以在 CSS 中使用 !important 覆盖默认样式。 Check out the rule 用于您的 CSS

代码可以是：

#fwslider .slideNext 
    position: absolute;
    top:50% !important;
    right:-50px !important;
    z-index: 10;

【讨论】：

尽管它可以解决他目前的问题，但这并不能回答他想了解并提出的问题：有谁知道是什么覆盖了我的风格？我添加了一个具有扩展信息的新答案。另请参阅我在初始问题 cmets 中的评论。