Question

该页面包含以下CSS：

input[type=text]
{
    display: inline; padding: 7px; background-color: #f6f6f6; font-size: 12px; letter-spacing: 1px; border: 1px solid #aac7d1; 
    /* lots of other styles here... */
}

我有很多文字输入元素和以下内容：

<input type="text" id="txt1" />

我尝试通过jQuery将不同的样式应用于这个单独的文本框（txt1）：

$('#txt1').removeClass().removeAttr('style').css({
    'background-color': '#ff0000',
    //lots of other styles here...
});

但是样式表中的那些样式无法通过这种方式从元素中删除。 css规则input[type=text]不是自定义类，因此removeClass()在这里不起作用，如果我是对的。

我想做的是;完全删除所有应用于元素txt1的样式。除了获取所有计算样式的列表并将它们设置为空之外，还有某种方法可以做到吗？

Answer 1

是否有某种方法可以做到这一点

如果选择器匹配，则无法停止应用于元素的规则。

你可以

设置您想要具有特定值的每个属性（使用适当的特定选择器和!important
将元素移动到另一个文档（然后可以加载，例如，iframe）。
删除规则（从而使其不适用于任何元素）
更改规则集上的选择器（因此它不再与元素匹配，您必须小心确保它仍然选择您关注的元素）

除了获取所有计算样式的列表并将其设置为空之外？

那不行。大多数属性都不接受空值，因此规则将无效并被忽略（从而导致先前的规则再次应用）。

Answer 2

正如您在此链接中看到的那样：http://www.w3.org/TR/CSS2/cascade.html#specificity，所有选择器都具有特异性值。因此，如果您编写此类css规则：#txt1 {}，则可以重置所有不必要的值。

如何从元素中删除所有继承和计算的样式？

2 个答案: