整个(完全)覆盖CSS样式

adolor 发布于 2019-03-09 css 最后更新 2019-03-09 14:37 0 浏览

我如何覆盖类,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类,我该怎么写?
.one-great-class {
    /* Is possible that a line of code to delete all styles from this class? */
}
已邀请:

dnulla

赞同来自:

浏览器将应用最后的css。

.class {
font-size: 16px;
font-size: 14px;
}
该类将获得font-size值14px。 你可以取消css作为最终。
.class {
font-size: 14px !important;
}
没有genarel css规则可以改变它。 浏览器使用此方法来赋予优先级 内联<嵌入<外部<用户代理。 如果你认为你需要更多的控制css然后使用javascript直接修改dom。

stotam

赞同来自:

目前在CSS中是不可能的。 但最终可能会有一个属性:all 它可能需要三个值: initial | inherited | unset 取自Cascading and Inheritance Module: “例如,如果作者在元素上指定all:initial,它将阻止所有继承并重置所有属性,就好像级联的作者,用户或用户代理级别中没有出现规则一样。” 根据截至2017年6月的MDN documentationall目前受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;
  }

jiusto

赞同来自:

经测试可与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>