4

如何覆盖类、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? */
}
4

3 回答 3

7

目前在 CSS 中是不可能的。

但最终可能会有这样的属性：all

它可以取三个值：

initial| inherited|unset

取自级联和继承模块：

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

根据截至 2017 年 6 月的MDN 文档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;
  }
于 2013-04-11T16:22:43.320 回答
0

经测试可与 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>
于 2013-04-11T16:56:50.390 回答
-1

浏览器将应用最后出现的 css。

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

该类将获得 14px 的字体大小值。

您可以将 css 清除为最终的。

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

没有流式 css 规则可以改变它。

浏览器使用这种方法优先考虑
inline < embeded < external < user-agent。

如果您认为您需要对 css 进行更多控制，请使用 javascript 直接修改 dom。

于 2013-04-11T16:35:05.240 回答