Question

如何为类，id或其他CSS选择器覆盖整个CSS样式？

例如：

如果在styles1.css我有：

/* also, this file contains a lot of styles used on other pages */

.one-great-class {
    background: white
    ...
    /* a lot of properties */
}

...在styles2.css（仅在一个网页中使用）我想完全覆盖课程one-great-class 我要做什么写？ / p>

.one-great-class {
    /* Is possible that a line of code to delete all styles from this class? */
}

Answer 1

目前在CSS中不可能。

但最终可能会有一个属性：all

可能需要三个值：

initial | inherited | unset

取自Cascading and Inheritance Module：

“例如，如果作者在元素上指定all：initial，它将阻止所有继承并重置所有属性，就好像级联的作者，用户或用户代理级别中没有出现规则一样。 “

截至2017年6月MDN documentation，all目前受Chrome，Firefox / Mobile和Opera支持。 Safari仅支持CSS4值revert，其他浏览器不支持。

  .one-great-class {
      border-radius: 50% 35% / 20% 25% 60%;
      color: red;
      font: 12px/14px Arial, serif;
      height: 20em;
      width: 20em;
    /*... etc. */
  }

  .one-great-class {
      all: initial;
  }

Answer 2

经过测试可与IE9，Chrome和Opera配合使用。当我写这篇文章时，我遇到了这个问题，因此我决定在现有规则之后添加一条新规则，而不是改变现有规则。从内存来看，问题在于Android 2.3中的默认浏览器

改变现有规则似乎是一个更好（更清洁）的解决方案，尽管附加新规则最终被证明是选择的路径。（我正在通过使用画布创建图像然后设置背景图像属性来更改背景图像。图像可能非常大，因此更新的偏好）

<强>功能

function replaceRuleAttrib(ruleSelector, attribText, newValue)
{
    var nSheets, nRules, sheetNum, curSheet, curStyle, curAttrib;
    var nSheets = document.styleSheets.length;

    if (nSheets == 0)
        document.head.appendChild(document.createElement('style'));
    else
    for (sheetNum = 0; sheetNum<nSheets; sheetNum++)
    {   
        curSheet = document.styleSheets[sheetNum];
        nRules = curSheet.cssRules.length;
        for (ruleNum=0; ruleNum<nRules; ruleNum++)
        {
            curRule = curSheet.cssRules[ruleNum];
            if (curRule.selectorText == ruleSelector)
            {
                for (styleI=0; styleI<curRule.style.length; styleI++)
                {
                    styleName = curRule.style[styleI];
                    styleVal = curRule.style[styleName];
                    if (styleName == attribText)
                    {
                        curRule.style[styleName] = newValue;
                        return true;
                    }
                }
            }
        }
    }
    document.styleSheets[0].insertRule( ruleSelector+'{' + attribText + ": " + newValue + "; }",  0);   
}

示例CSS（之前）

<style>
h1
{
    color: red;
}
</style>

<强>用法：

function onHeadingClick()
{
    replaceRuleAttrib('h1', 'color', 'green');
}

示例CSS（之后）

<style>
h1
{
    color: green;
}
</style>

Answer 3

浏览器将应用最后的css。

.class {
font-size: 16px;
font-size: 14px;
}

该类将获得font-size值14px。

你可以将css定为最终版。

.class {
font-size: 14px !important;
}

没有genarel css规则可以改变它。

浏览器使用此方法赋予优先权内联＆lt;嵌入＆lt;外部＆lt;用户代理。

如果你认为你需要更多控制css然后使用javascript直接修改dom。

整个（完全）覆盖CSS样式

3 个答案: