Question

这是一个非常基本的问题。

如果是<div> class="oldClass"。如果我使用JavaScript（使用.className）将该div的类更改为class="newClass"。将以前的所有风格都消失了吗？或者，在应用newClass？

之后，将仅应用在两个类中定义的样式

更详细地阐述我的问题。如果oldClass是

.oldClass
{
    border:1px solid red;
    background-color:green;
}

和newClass是

.newClass{
    background-color:black;
}

使用javascript（使用.className）应用newClass后，元素具有哪些样式？

（注意 - 我使用不同的代码进行了几次测试。每次都得到不同的结果。这就是为什么我要问一个非常基本的问题） < / p>

Answer 1

只会应用newClass background-color:black;

回复您的评论：DEMO HERE

Answer 2

类别为“oldClass”的元素将具有1px纯红色边框和绿色背景。
具有“newClass”类的元素将具有黑色背景。
具有“oldClass”和“newClass”类的元素将具有1px纯红色边框以及绿色背景或黑色背景，具体取决于CSS文档中这些选择器的顺序

因此，如果您通过将className设置为“newClass”来删除“oldClass”，则.oldClass选择器中定义的样式将不再出现在该元素上，但.newClass选择器样式将出现。

JSFiddle demo

Answer 3

在任何时候，所有可以匹配元素的样式规则都将按特定顺序应用于它*。如果用newClass替换class oldClass，则该元素将不再具有oldClass类，因此为oldClass指定的样式规则可能不再适用于它。

一个元素一次可以有多个类。要设置多个类，只需通过空格分隔它们。

*）订单有点难以解释，但最基本的是：

!important值具有最高优先级
通过样式设置的属性
具有更多内容选择器（#element）
包含更多类和属性选择器的规则（.class和[attr]）
包含更多标记名（tag）
规则在样式表中排在最后

您可以阅读有关特异性here的更多信息。

示例：

HTML

<div id="el" class="c1 c2 c3" style="color:green">I am text</div>

CSS：

#el { /* matches elements with id=el */
  color:red;
  background-color:blue;
}

.c1.c2 { /* matches elements with classes c1 and c2 */
  height:50px;
}

.c1,
.c2 { /* matches elements with class c1 and elements with class c2 */
  height:100px;
}

.c1 { /* matches elements with class c1 */
  color:grey;
  background-color:purple;
}

.extra { /* matches elements with class extra */
  width:50px;
}

在该示例中，div将具有以下样式：

颜色：绿色（覆盖其他颜色，因为它设置为样式）
background-color：blue （覆盖紫色，因为id比类更具体）
身高：50px （覆盖100px，因为选择器中的2个类比一个更具体）

如果您要将c1换成extra，它将具有以下样式：

的颜色：绿

高度：100px （高度：50px不匹配，因为元素没有类c1）

宽度：50px （匹配因为元素有额外的类）

更改元素的类会删除以前的所有样式吗？

3 个答案: