代码之家 › 专栏 › 技术社区 › simon

如何删除CSS元素样式内联(没有JavaScript)?

override inheritance css html

simon · 技术社区 · 16 年前

我在样式表文件中为特定的HTML元素指定了一个样式,如下所示


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

在一种特殊情况下,我希望在HTML文档中使用label元素,但忽略为label元素指定的样式(仅针对文档中的一个实例)。有没有办法以通用的方式实现这一点 不使用内联样式替代元素样式属性 ?


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

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

6 回复 | 直到 16 年前

Community Mohan Dere 6 年前

因为CSS不提供“default”关键字,所以恢复属性默认值的唯一方法是显式地重新声明该属性。

由于CSS的级联特性,最好尽可能明确地定义样式规则,以防止对不打算进行样式化的元素进行样式化。

Sophie88 16 年前

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

simon 10 年前

情况在6年内有所改变:现在可以通过使用 initial , unset 或 revert

prodigitalson 16 年前

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


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

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

但是,这可能无法提供所需的结果-另一种方法是为所有其他标签指定一个particluar类,然后不将该类指定给“default”标签。

Tom 16 年前

我不认为您可以将其重置为样式表中标签定义之前的状态,但是您可以给标签一个id并在样式表中覆盖它。

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

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

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

user193130 12 年前

你可以使用 :not selector :

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