css 样式被 element.style 覆盖

Question

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

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

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

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

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

Answer 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?，其中说：

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

1. 内联 css（html 样式属性）覆盖样式标签和 css 文件中的 css 规则
2. 更具体的选择器优先于不太具体的选择器
3. 如果两者具有相同的特异性，代码中稍后出现的规则会覆盖之前的规则。
4. 带有 !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代码生成。

Answer 2

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

代码可以是：

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