📌  相关文章
📜  如何确定 HTML 中样式属性的优先顺序？(1)

📅  最后修改于: 2023-12-03 14:53:13.805000             🧑  作者: Mango

如何确定 HTML 中样式属性的优先顺序？

在 HTML 中，样式属性可以由多个地方设置，例如：内联样式、内部样式表和外部样式表等，这些样式属性具有一定的优先级。那么，如何确定样式属性的优先顺序呢？下面我们来讲解一下。

样式属性优先级

样式属性的优先级有以下四个等级，从高到低为：

  1. !important
  2. 内联样式（在 HTML 元素上直接设置的样式）
  3. ID 选择器
  4. 类选择器或标签选择器或通配符选择器
优先级计算规则

当多个选择器都设置了相同的样式属性时，会按照以下规则计算优先级：

  1. 对于每个 !important，添加一个权重值为 10000。
  2. 对于每个内联样式，添加一个权重值为 1000。
  3. 对于每个 ID 选择器，添加一个权重值为 100。
  4. 对于每个类选择器、属性选择器或伪类选择器，添加一个权重值为 10。
  5. 对于每个标签选择器或通配符选择器，添加一个权重值为 1。
  6. 计算的结果即为选择器的总权重值。
例子

对于以下 HTML 代码：

<!DOCTYPE html>
<html>
<head>
	<style>
		#div1 {
			color: red;
		}
		.wrapper .text {
			color: blue;
		}
		p {
			color: green;
		}
	</style>
</head>
<body>
	<div id="div1" class="wrapper">
		<p class="text" style="color: yellow;">Hello World</p>
	</div>
</body>
</html>

其中，内联样式 style="color: yellow;" 应用于 <p> 元素，ID 选择器 #div1 应用于 <div> 元素，类选择器 .wrapper 和 .text 以及标签选择器 p 也都应用于元素。

根据以上优先级计算规则，计算的结果如下：

  1. 内联样式权重值：1000
  2. ID 选择器权重值：100
  3. 类选择器和标签选择器权重值：11
  4. !important 权重值：0

因此，最终优先级为：

  1. 内联样式：1000
  2. ID 选择器：100
  3. 类选择器和标签选择器：11

因此，最终应用于 <p> 元素的样式为 color: yellow;。

总结

通过以上例子可以看出，当样式属性冲突时，会根据优先级计算规则来决定最终应用的样式，因此，我们在编写 HTML 和 CSS 时，需要注意样式的优先级问题，避免出现冲突。