Question

我有一个按钮，点击它时会加载一个额外的CSS文件，它会覆盖很多基本的CSS文件。（如果你想知道这是为了无障碍目的）

假设我在background的多个选择器中使用了background-color和input[type='text']属性。我想重置/删除它们。我想要为这些背景属性设置一个新值，我想删除它们，这样浏览器就会像默认情况一样渲染每一个。

原因是因为在高对比度模式下，Firefox中的主体采用黑色背景颜色，任何设置为input或button的背景都将使用等于文本颜色的值覆盖它。将使输入或按钮的值不可读。但那是另一个故事......

编辑：由于到目前为止所有人都在告诉我为这些人设置一些新的财产，我用大胆的大写字母写下来 - 我不需要为{{1}设置新的财产}}。：）如果该属性存在，背后的原因如果在高对比度模式下设置的背景也是黑色，则Firefox默认为黑色。要对此进行测试，请转到background并检查Preferences -> Content -> Colors。 Here's how my options look

Answer 1

在第一个css文件的开头执行css reset / normalize。然后在第二个开始时再做一次。您可以省略第一次重置，但这将为您提供一致的结果。

Answer 2

您可以删除原始样式表。只需为其分配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类到正文。当您加载其他CSS文件（可能是通过JavaScript），然后您删除此类。所有命名空间规则都将失效。

^* CSS预处理器，例如SASS和LESS让您更容易管理这些规则。

Answer 3

听起来最好的解决方案是让两个不同的CSS类针对单个输入，并在两者之间来回切换。有几种方法可以做到这一点：

<强> CSS：

input[type="text"].a {...}
input[type="text"].b {...}

这里我们有两个不同的类，a和b。最初定义输入时，请设置class="a"。然后，我们会在单击按钮时将其与b交换。同样，有几种方法可以做到这一点：

<强> jQuery的：

$('.a').click(function(){
    $(this).removeClass('a').addClass('b');
});

普通JS

var button = document.querySelector('.a');
button.addEventListener('click', function(){
    button.classList.remove('a');
    button.classList.add('b');
});

这是实现这种行为的通常首选方法。它严格遵守标准，因为它将逻辑，标记和表示分成各自的部分。

注意：上面列出的普通JS方法使用了一些非常现代的原生JS代码。请查看You Might Not Need jQuery以查找跨浏览器实现此功能的建议。

Answer 4

不是向元素添加或删除属性，我认为更好的方法是将这些额外的属性放在CSS类中，然后根据需要在元素中添加或删除这个额外的类。如果您需要覆盖，请使用!important。现在只是添加/删除类。

这是jQuery中的一个例子

.MyControl{background: blue;}
.MyControlAccessibility{background: red !important;}

$(SomeControl).click(function () { $(this).addClass('MyControlAccessibility'); }
$(SomeControl).click(function () { $(this).removeClass('MyControlAccessibility'); }

Answer 5

如上所述，在身体上使用全局类很好。

另一种方法是将您的浅色和深色的主题特定样式放入来自常见CSS的单独样式表中，然后禁用您不想要的样式。这将避免冲突并需要使用!important，并且您可以保持清洁，而不必破坏jquery.css（）的各个位。

例如

<强> base.css

a { text-decoration:none; }

<强> dark.css

body { background-color:#000; }
a {color:#fff; font-size:1.2em;}

<强> light.css

a {font-size:1.5em;}

请注意，light.css没有background-color等属性，因此当它们从暗切换为浅时，将再次使用默认值。

要进行切换，您可以按照以下方式执行操作：

for (var i = 0; i < document.styleSheets.length; i++) {
    var ss = document.styleSheets[i];

    // some browsers store in url, others in href
    if((ss.href || ss.url || '').indexOf('dark.css') > -1) {
        ss.disabled = true;
    }
}

通过禁用而不是删除当前的，应该更容易在两者之间切换。

完全删除CSS属性

5 个答案: