css中权重是什么意思

CSS中权重是什么意思

CSS中的权重指的是样式适用的优先级，有不同的选择器对应不同的权重，当多个样式规则应用到同一个元素上时，就需要计算出它们的权重大小，以决定哪一条规则会被应用。

权重的计算规则

通常，CSS规则的选择器可以分为四种：标签选择器、类选择器、ID选择器和内联样式。这四种选择器对应的权重逐级递增，如下所示：

	标签选择器 < 类选择器 < ID选择器 < 内联样式
	

当有多个样式规则应用到同一个元素上时，需要对它们的权重进行计算。计算规则如下：

1. 对于每个元素，标签选择器的权重为1，类选择器的权重为10，ID选择器的权重为100，内联样式的权重为1000；
2. 将每个选择器的权重相加，得出总权重；
3. 如果两个规则的权重相同，则后面定义的规则将覆盖前面的规则。

样式优先级演示

下面的例子是三个样式规则应用到同一个元素上，演示了样式优先级的计算规则：

	/* 标签选择器，权重为1 */
	p {
		color: red;
	}
	/* 类选择器，权重为10 */
	.text {
		color: blue;
	}
	/* 内联样式，权重为1000 */
	<p style="color: green">Hello World</p>
	

在上面的例子中，内联样式权重最高，所以元素的文本颜色将变为绿色。

总结

CSS中的权重是样式规则应用优先级的衡量标准。权重高的样式规则将会覆盖权重低的样式规则。在编写CSS时，应该尽量使用标签选择器和类选择器，避免使用ID选择器和内联样式，以避免产生样式优先级的混乱。