彻底删除CSS属性
我有一个按钮，点击时会加载一个额外的CSS文件，它覆盖了很大一部分基本的CSS文件。 （如果您想知道，这是为了可访问性）
比方说，我有一个background和background-color属性在多个选择器中用于input[type='text'] 。 我想重置/删除这些。 我不想为这些背景属性设置一个新值，我想删除它们，这样浏览器就会默认渲染每一个。
其原因是因为在Firefox中以黑色背景颜色为背景的高对比度模式下，任何设置为input或button背景都会覆盖它，其值等于文本颜色，从而使输入或按钮的值不可读。 但那是另一回事......
编辑：因为到目前为止所有人都告诉我为这些设置一些新的属性，所以我用粗体大写字母来写它 - 我不需要为background设置新属性。 :)如果该属性存在，背后的原因如果在高对比度模式下设置的背景也是黑色的，则Firefox默认为黑色。 要测试这一点，请转到Preferences -> Content -> Colors并选中Allow pages to choose their own colors, instead of my selections above 。 以下是我的选项的外观。
您可以删除原始样式表。 只需为其分配一个id并使用jQuery.remove(...) 。
另一种解决方案是将第一个样式表改为使用某种名称空间+，例如：
/* these are the rules that you want to be removed */
.stylesheet1 { }
.stylesheet1 h1 { }
.stylesheet1 p { }
.stylesheet1 a { }
.stylesheet1 input { }
/* these rules can co-exist with the next stylesheet */
nav { }
article { }
aside { }
section { }
在HTML内部，将stylesheet1类添加到body。 当你加载其他CSS文件（大概是通过JavaScript），然后你删除这个类。 所有的命名空间规则将变得无效。
* CSS预处理器，例如SASS和LESS使您更容易管理这些规则。
在你的第一个CSS文件的开始进行css reset / normalize。 然后在第二个开始时再做一次。 您可以忽略第一次重置，但这会给您一致的结果。
这听起来像对你最好的解决方案是有两个不同的CSS类针对单个输入，并在两者之间来回切换。 做这件事有很多种方法：
CSS：
input[type="text"].a {...}
input[type="text"].b {...}
这里我们有两个不同的类， a和b 。 最初定义输入时，设置class="a" 。 当点击按钮时，我们会用b替换它。 再次，有几种方法可以做到这一点：
jQuery的：
$('.a').click(function(){
$(this).removeClass('a').addClass('b');
});
Plain JS
var button = document.querySelector('.a');
button.addEventListener('click', function(){
button.classList.remove('a');
button.classList.add('b');
});
这是实现这种行为的一般首选方法。 它严格遵守标准，因为它将逻辑，标记和演示分为各自的部分。
注意：上面列出的纯JS方法使用了一些非常现代的本地JS代码。 看看你可能不需要jQuery来找到使这个功能跨浏览器的建议。
链接地址: http://www.djcxy.com/p/94883.html