Question

有很多关于相关主题的讨论，但没有讨论这个具体问题。所以，请不要在没有仔细阅读问题的情况下跳转并将其标记为重复。

JQuery没有任何修改类的方法（尽管它有添加和删除类的方法）。在那方面有很多讨论。我的问题是假设有一个类在

中

      .myclass
      {
        property1: value1;
        property2: value2;
        ...
       }

然后，我动态地使用JQuery做了类似的事情：

     newstyle = "<style type='text/css'>.myclass {property1:newvalue1; property2:                 newvalue2,...} </style>";
     $('head').append(newstyle);

请原谅错别字。我的问题是：

问题1：动态定义的类似乎会覆盖静态定义的myclass。在某种程度上，是不是动态类修改？有什么关于这个不是跨浏览器或任何其他陷阱？

问题2：它是否覆盖或补充静态定义的myclass？我的意思是，如果静态定义的myclass具有property1和其他属性，并且动态定义的myclass仅具有属性2。现在定义的总属性是两个类的联合，交叉点是否被动态定义的类覆盖了？

是的，我尝试了不同的行为，但我没有基础知道应该期待什么。

Answer 1

这是由specificity引起的。动态添加的样式将覆盖现有样式，因为动态CSS在非动态CSS后呈现：

 <style type="text/css"> .myclass { property1: value1; } </style>  <style type="text/css"> .myclass { property1: value2; /* Same specificity, overrides previous. */ } </style>

我创建了一个this JSFiddle demo来证明这一点。这里我有一个figure元素，ID为“example”。有figure选择器将background属性设置为红色，figure#example选择器将color属性设置为白色。然后我添加了一个CSS style元素，它使用figure选择器将background属性更改为绿色，并尝试将color属性更改为黑色。

由于figure#example选择器的特异性高于动态figure选择器，因此只更改了background属性。

 <style type="text/css"> .myclass.myclass { /* Higher specificity selector by duplicating class. */ property1: value1; } </style>  <style type="text/css"> .myclass { property1: value2; /* No change as previous has higher specificity. */ } </style>

如果我们 prepend 这个CSS，动态CSS在我们的静态CSS之前添加，我们的静态CSS被用作我们的选择器的特殊性是相同的。 JSFiddle prepend demo：

 <style type="text/css"> .myclass { property1: value1; } </style>  <style type="text/css"> .myclass { property1: value2; /* Same specificity, overrides previous. */ } </style>

Answer 2

对于您的第一个问题，没有这样的陷阱或浏览器兼容性问题。但是，在大多数情况下，只需要动态地为任何类更改一小组属性。（如果没有，它不是编程CSS的好方法）

这可以直接使用

实现

$('selector').css({"property1": "value1", ...})

此外，这确保只有感兴趣的特定元素受到影响，而其他元素保持不变。

问题2：现在定义的属性将是2个类的并集，并且交叉点被覆盖。尝试一个接一个地定义相同的类属性并验证。

.myclass {
  width: 100%;
  max-height: 200px;
}
.myclass {
  width: 80%;
  height: 300px;
}

Answer 3

您实际做的是动态转换原始HTML，如下所示：

<head>
    <style type="text/css">
        .myclass {
            property1: value1;
            property2: value2;
        }
    </style>
</head>

...进入看起来像这样的东西：

<head>
    <style type="text/css">
        .myclass {
            property1: value1;
            property2: value2;
        }
    </style>

    <style type="text/css">
        .myclass {
            property1: newvalue1;
            property2: newvalue2;
        }
    </style>
</head>

因此，我们最终得到两个目标相同元素的CSS选择器（任何具有myclass类的东西）。 CSS specificity rules规定两个属性冲突“最后一个获胜”，因此动态添加的CSS将覆盖之前的任何内容。但是，如果存在不冲突的属性，则结果将是两个CSS规则的并集。

Answer 4

CSS中的C代表“Cascading”，这意味着css完全支持按以下顺序重新定义样式类

外部引用的样式表
本地定义的样式（例如，根据您的示例在头部中<style>...</style>）
本地定义的样式（即<span style="...">）。

对Q1的回答：关于css类没有任何“静态”，它们可以如上所述重新定义

对Q2的回答：补充它。也就是说，如果在外部样式表中定义以下内容：

.myclass{width:100px}

然后在本地：

 <style>
   .myclass{color:red}
 </style>

然后标记为myclass的任何内容都将为100px且红色

使用JQuery方法覆盖类以插入样式元素

4 个答案: