如何覆盖CSS样式

Question

在我的 CSS 样式中，我有这行代码：

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

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

width: 25%;
float: left;

在页面的内部CSS中覆盖它是可能的，这将导致原始行为被忽略吗？

- gadss

---

你尝试过在内部页面中进行覆盖吗？ - Anusha

Answer 1

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

在你的内部CSS中编写如下内容 -

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

- Dipak

---

为什么不建议使用 !important？ - Ben Behar

@BenjaminBehar，因为它会破坏样式表中的自然级联，从而使调试变得更加困难。当两个具有!important规则的冲突声明应用于同一元素时，将应用具有更高特异性的声明。 - Dipak

不能推荐不使用 !important，因为它是规范的一部分，可以放心使用。重要的是要适度使用它，只有在必要时才使用。它就像 CSS 的大锤子。 - Tony Brasunas

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 */

- Mr_Green

Answer 3

提高你的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>

- 95faf8e76605e973

Answer 4

你可以创建一个名为的另一个类

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

每当您需要覆盖样式时，请添加此类，如下所示：

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

如果您不需要其他<li>，请删除它们。

- Satish Bellapu

Answer 5

只需要添加

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

- Vinit

Answer 6

你可以在外部样式表后的所需页面中添加你自己的样式，这样它们就会产生层叠效果并覆盖第一组规则。

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

- Musa

Answer 7

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

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

注：

1. 有些混乱，会增加浏览器渲染所需的解析量。
2. 也许是我最喜欢的方法。
3. 不跨浏览器，有些浏览器需要以某种方式完成，而其他浏览器则需要以不同的方式完成，而其余的浏览器则对此表示反感。

- enhzflep