Question

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

当我的函数执行时，正在添加带有更改的新类 - dom证明了 - 但是，样式没有超过原始样式。

我已经尝试过classList.Add，classList.toggle，className.add / Classname.toggle。似乎没什么用。

为什么会这样？

＆＃13;

function nextPage()
{
	var step2 = document.getElementById("step2");
	
step2.classList.toggle("newClass");
	
};

＆＃13;

#step2
{
	height: 27px;
	width: 27px;
	border: 1px solid #e5e5e5;
	background: linear-gradient(#f2f2f2, #e9e9e9);
	border-radius: 50%;
	content: "";
	margin-left: 95.5px;
	float: left;
}

.newClass
{
	background: linear-gradient(#f2f2f2, #8c66ff);
}

＆＃13;

<div id="step2"></div>

<br />

<p id="next" onclick="nextPage()">Next</p>

＆＃13;

Answer 1

您的身份step2将始终覆盖您的班级newClass。

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

＆＃13;

function nextPage()
{
	var step2 = document.getElementById("step2");
	
step2.classList.toggle("newClass");
	
};

＆＃13;

#step2
{
	height: 27px;
	width: 27px;
	border: 1px solid #e5e5e5;
	background: linear-gradient(#f2f2f2, #e9e9e9);
	border-radius: 50%;
	content: "";
	margin-left: 95.5px;
	float: left;
}

#step2.newClass
{
	background: linear-gradient(#f2f2f2, #8c66ff);
}

＆＃13;

<div id="step2"></div>

<br />

<p id="next" onclick="nextPage()">Next</p>

＆＃13;

Answer 2

计算CSS特异性值：

正如我们所知，这是因为简单地使用类名本身具有较低的特异性值，并被另一个选择器击败，该选择器使用ID值定位无序列表。该句中的重要词语是类和ID。 CSS对类和ID应用了截然不同的特异性权重。事实上，ID具有无限的特异性价值！也就是说，没有任何类别的数量可以超过ID。有关详细信息https://css-tricks.com/specifics-on-css-specificity/

因此，更多特异性使用Class以及ID。！importent，也有效，但它注意到一个很好的做法。希望这会对你有帮助..

Javascript - 添加类和样式Prescience

2 个答案: