Javascript-添加类和样式预测

我正在尝试为一个表单制作一些进度指示器，它会根据您所处的页面而变化。我认为最简单的方法是创建圆圈ID，设置它们的样式，然后添加一个带有一个或两个样式更改的类列表，以便在打开特定页面时显示不同的内容

当我的函数执行时，将添加带有更改的新类——dom正在证明这一点——但是，该样式并没有超过原始样式

我试过classList.Add、classList.toggle、className.Add/className.toggle。似乎什么都不管用

为什么会这样

函数下一页（）
{
var step2=document.getElementById（“step2”）；
步骤2.classList.toggle（“newClass”）；
};
#步骤2
{
高度：27px；
宽度：27px；
边框：1px实心#e5；
背景：线性梯度（#f2f2f2，#e9e9e9）；
边界半径：50%；
内容：“；
左边距：95.5px；
浮动：左；
}
.新班级
{
背景：线性梯度（#f2f2f2，#8c66ff）；
}



next
您的id
step2
将始终覆盖您的类
newClass

最简单的解决方案是将CSS中的
.newClass{…}
更改为
#step2.newClass{…}
，使其更具体


函数下一页（）
{
var step2=document.getElementById（“step2”）；
步骤2.classList.toggle（“newClass”）；
};
#步骤2
{
高度：27px；
宽度：27px；
边框：1px实心#e5；
背景：线性梯度（#f2f2f2，#e9e9e9）；
边界半径：50%；
内容：“；
左边距：95.5px；
浮动：左；
}
#步骤2.新课程
{
背景：线性梯度（#f2f2f2，#8c66ff）；
}



next
您的id
step2
将始终覆盖您的类
newClass

最简单的解决方案是将CSS中的
.newClass{…}
更改为
#step2.newClass{…}
，使其更具体


函数下一页（）
{
var step2=document.getElementById（“step2”）；
步骤2.classList.toggle（“newClass”）；
};
#步骤2
{
高度：27px；
宽度：27px；
边框：1px实心#e5；
背景：线性梯度（#f2f2f2，#e9e9e9）；
边界半径：50%；
内容：“；
左边距：95.5px；
浮动：左；
}
#步骤2.新课程
{
背景：线性梯度（#f2f2f2，#8c66ff）；
}



下一步计算CSS特异性值：

正如我们所知，这是因为仅仅使用类名本身具有较低的特异性值，并且被另一个以ID值为目标的无序列表选择器所压倒。这句话中的重要单词是class和ID。CSS对class和ID应用了截然不同的特异性权重。事实上，ID具有无限多的特异性值！也就是说，单是类的数量不能超过ID。
更多信息

因此，更具体地使用类和ID。
!重要的是，它也起作用，但它注意到一个良好的做法。
希望这对你有帮助
 计算CSS特异性值：

正如我们所知，这是因为仅仅使用类名本身具有较低的特异性值，并且被另一个以ID值为目标的无序列表选择器所压倒。这句话中的重要单词是class和ID。CSS对class和ID应用了截然不同的特异性权重。事实上，ID具有无限多的特异性值！也就是说，单是类的数量不能超过ID。
更多信息

因此，更具体地使用类和ID。
!重要的是，它也起作用，但它注意到一个良好的做法。
希望这对你有帮助
 请参阅规则--ID比类具有更高的特异性，因此它获得优先级。将
.newClass{…}
更改为
#step2.newClass{…}
请参阅规则--ID比类具有更高的特异性，因此它获得优先级。将
.newClass{…}
更改为
\step2.newClass{…}
“您的id
step2
将始终覆盖您的类
newClass
。“这不是事实，即使不建议使用
！重要信息
将覆盖
步骤2
属性。此外，多个class/id和类选择器可能会使维护变得更加困难。在我看来，正确的方法是将他的id
step2
选择器更改为一个类，或者将他的
线性渐变
分离到另一个类中，该类可以通过级联被他的
newClass
覆盖。如果id作为JS函数的选择器有帮助，您仍然可以保留它。“您的id
step2
将始终覆盖您的类
newClass
”这不是真的，即使不建议使用
！重要信息
将覆盖
步骤2
属性。此外，多个class/id和类选择器可能会使维护变得更加困难。在我看来，正确的方法是将他的id
step2
选择器更改为一个类，或者将他的
线性渐变
分离到另一个类中，该类可以通过级联被他的
newClass
覆盖。如果id作为JS函数的选择器有用，您仍然可以保留它。