如何覆盖css样式

Question

我正在开发页面，现在在我的 css 样式中我有这行代码

.flex-control-thumbs li {
    width: 25%;
    float: left;
    margin: 0;
}

对于我的页面。 现在，我的一些页面不需要这一行

width: 25%;
float: left;

有可能我可以在页面的内部css中覆盖它，这会导致原始行为被忽略吗？

Answer 1

不推荐使用!important但在这种情况下我认为你应该 -

在你的内部 CSS 中写下这个 -

.flex-control-thumbs li {
  width: auto !important;
  float: none !important;
}

Answer 2

而不是覆盖，将其创建为不同的 css，并将其作为其他 css（多个 css）在您的元素中调用。
就像是：

.flex-control-thumbs li 
{ margin: 0; }

---

内部 CSS：

.additional li
{width: 25%; float: left;}

---

<ul class="flex-control-thumbs additional"> </ul> /* assuming parent is ul */

Answer 3

您可以再创建一个类命名

.flex-control-thumbs-without-width li {
width: auto;
float: initial; or none
}

每当您需要像下面这样覆盖时添加这个类，

<li class="flex-control-thumbs flex-control-thumbs-without-width"> </li>

并且在不需要其他<li>时删除

Answer 4

只需添加

.flex-control-thumbs li {
width: auto; 
}

Answer 5

是的，你确实可以。 我可以想到三种方法来实现这一点。

1. 向元素添加内联样式。
2. 创建并附加一个新的 <style> 元素，并添加文本以覆盖此样式。
3. 修改css规则本身。

笔记：

1. 有点混乱，并增加了浏览器渲染所需的解析。
2. 也许我最喜欢的方法
3. 不是跨浏览器，有些浏览器喜欢以一种方式完成，而其他浏览器则以不同的方式完成，而其余的浏览器只是对这个想法犹豫不决。

Answer 6

您可以在外部样式表之后的所需页面中添加样式，以便它们层叠并覆盖第一组规则。

<link rel="stylesheet" href="allpages.css">
<style>
.flex-control-thumbs li {
  width: auto;
  float: none;
}
</style>

Answer 7

增加你的CSS 特异性

例子：

.parent-class .flex-control-thumbs li {
  width: auto;
  float: none;
}

演示：

 .sample-class { height: 50px; width: 50px; background: red; } .inner-page .sample-class { background: green; }

 <div> <div class="sample-class"></div> </div> <div class="inner-page"> <div class="sample-class"></div> </div>