我该如何移除CSS元素样式内联（无需JavaScript）？

Question

我在样式表文件中为一个特定的HTML元素指定了样式，就像这样：

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

在一个特殊情况下，我想在HTML文档中使用label元素，但忽略为label元素指定的样式（仅针对文档中的一个实例）。有没有一种通用的方式来做到这一点而不需要使用内联样式覆盖元素样式属性？

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

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

- simon

Answer 1

来自Mozilla开发者中心:

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

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

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

- ЯegDwight

Answer 2

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

- Sophie88

---

不使用内联样式覆盖元素的样式属性 - Tom

回答这些问题比我预期的要难 :( - Sophie88

我经常这样做，赶着成为第一个回答。随着练习的增加，变得更容易了，我想。 - Tom

Answer 3

在过去的6年中，情况有所改变：现在可以使用initial、unset或revert关键字来删除CSS属性集，而无需使用JavaScript。这些关键字在所有现代浏览器中都得到支持。请注意保留HTML标签。

- simon

Answer 4

我认为你无法将它重置为样式表中标签定义之前的状态，但你可以给标签一个ID并在样式表中覆盖它。

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

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

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

- Tom

Answer 5

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


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

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

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

- prodigitalson

Answer 6

你可以使用 :not选择器：

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

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

- user193130