Home / Questions / 54825
Accepted
toledano
Asked: 2020-03-13 10:17:54 +0800 CST 2020-03-13 10:17:54 +0800 CST

覆盖 CSS 属性的值

  • 772

我正在编辑一个 CSS 文件，我想覆盖该属性的值，但我不想设置一个新值。

我有文件 A，我无法编辑。

.menu a {
  padding: 20x;
}

所以现在我创建了另一个样式表，但是如果我把

.menu a {
  padding: 0;
}

它看起来不像我想要的样子。一种选择是输入另一个值，例如padding: 5px;，但我正在寻找替代方法。当我在 Safari 的检查器中取消选中该属性时，事情看起来就像我预期的那样。

例子：

.caja {
  background-color: indianred;
  padding: 40px;
  font-size: 1.7em;
  color: white;
}

.caja {
  padding: 20px;
}


/* solo cambiar las líneas de abajo */
/* no vale padding: 40px; */
.caja {

}
<div class="caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code>
</div>

如何padding从另一个样式表中禁用该属性？

在此示例中，使用不同的类和元素来实现效果，使用unset. 在我想要的条件下，这可能是不可能的。

css3

5 Answers

  1. 如果取消选中它时您看到它是您想要的，那么您可能正在按照您想要的方式从祖先那里继承该属性。如果你使用padding: inherit你肯定会得到想要的风格。

    • 3

  2. 如果您想要覆盖样式，即检索该特定样式的默认值，在这种情况下padding，之前已修改的 （与从 Google Chrome 检查器中取消选中样式相同）您应该使用值initial。

    您修改后的示例：

    .caja {
  background-color: indianred;
  padding: 40px;
  font-size: 1.7em;
  color: white;
}

.caja {
  padding: 20px;
}

.caja {
  padding: initial;
}
    <div class="caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code>
</div>

    • 3

  3. 如果您使用important它，您的样式问题将得到解决

    .caja {
  background-color: indianred;
  padding: 40px;
  font-size: 1.7em;
  color: white;
}

.caja {
  padding: 20px;
}


/* solo cambiar las líneas de abajo */
/* no vale padding: 40px; */
.caja {
      padding: 40px !important;
}
    <div class="caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code>
</div>

    • 1
  4. Best Answer

    当你提出它时，你不能重置它，因为它是以前分配的padding: 20px;

    唯一的办法就是再放padding: 40px;一遍：

    .caja {
  background-color: indianred;
  padding: 40px;
  font-size: 1.7em;
  color: white;
}

.caja {
  padding: 20px;
}

.caja {
  padding: 40px; // Nuevo valor asignado
}

    这就是CSS层叠样式表的工作方式。

    • 1

  5. 如果您可以访问 HTML，还有另一种方法可以做到这一点。

    在 html 中，您id为元素分配了一个属性，在这里我称之为nueva-caja：

    <div class="caja" id="nueva-caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code><br>Aquí el div tiene <code>class="caja" id="nueva-caja"</code>
</div>

    然后在 CSS 中：

    #nueva-caja {
  background-color: blue;
  padding: 40px;
}

    在 CSS 中，id将优先于类名，正如您在示例中看到的那样（我添加了蓝色背景颜色以查看它是否有效）。

    如果你把上面的代码放在 CSS 的开头，它也可以工作，我已经测试过了:)

    .caja {
  background-color: indianred;
  padding: 40px;
  font-size: 1.7em;
  color: white;
}

.caja {
  padding: 20px;
}

#nueva-caja {
  background-color: blue;
  padding: 40px;
}
    Con id:
<div class="caja" id="nueva-caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code><br>Aquí el div tiene <code>class="caja" id="nueva-caja"</code>
</div>

<hr />
Sin id:
<div class="caja">
  Quiero que el padding vuelva a ser 40 anulando el <code>padding: 20px;</code><br>Aquí el div tiene solamente <code>class="caja"</code>
</div>

    • 1