Question

我在样式表文件中为特定的HTML元素指定了样式，比如


label {
  width: 200px;
  color: red; 
}

在一个特例中，我想在HTML文档中使用label元素，但忽略为label元素指定的样式（仅适用于文档中的一个实例）。有没有办法以通用的方式实现这一点而不用内联样式覆盖元素样式属性？


<label for="status">Open</label>

重申一下，对于显示标签的HTML代码，应用了元素样式（宽度为200像素，红色）。我希望使用默认样式属性（不知道它们是什么），而不必知道元素样式设置中具体指定的内容。

Answer 1

来自Mozilla developer center：

由于CSS不提供“default”关键字，因此恢复属性默认值的唯一方法是显式重新声明该属性。

因此，在使用选择器（例如，按标签名称的选择器，例如p）编写样式规则时，应特别注意您可能希望使用更具体的规则（例如使用id或类选择器的规则）覆盖它们，因为原始默认值无法自动恢复。

由于CSS的级联性质，最好尽可能具体地定义样式规则，以防止不打算设置样式的样式元素。

Answer 2

  <label ... style = "width: auto; color: inherit" />

Answer 3

<label ... class="default">...</label>


label {
  width: 200px;
  color: red; 
}

label.default {
  width: auto;
  color: inherit; 
}

然而，这可能无法提供所需的结果 - 另一种方法是给所有其他标签一个特定的类，然后不将该类分配给“默认”标签。

Answer 4

情况在6年内有所改变：现在可以使用initial，unset或revert关键字删除不使用JavaScript的设置CSS属性。所有现代浏览器都支持这些。

Answer 5

我认为您不能将其重置为样式表中标签定义之前的内容，但您可以为标签指定ID并在样式表中覆盖它。

<label for="status" id="status-label">Open</label>

label {
  width: 200px;
  color: red; 
}

label#status-label {
  width: auto;
  color: blue; 
}

Answer 6

您可以使用:not selector：

label:not([for="status"]) {
  width: 200px;
  color: red; 
}

支持似乎可以追溯到2009年左右（FF3.5）

如何删除内联的CSS元素样式（不使用JavaScript）？

6 个答案: