在哪个订单网页代码执行，我们如何改变订单

In which order webpage codes are executed and how can we change the order?

本文关键字：我们 何改变 改变 执行 网页 代码 单网页      更新时间：2023-09-26

让我们以下面的代码为例:

var tst;
tst = document.getElementsByClassName("tst");
tst.style.backgroundColor = "#008000";
tst.style.marginTop = "50px";
tst.innerHTML = "Testing an element.";
body {
	font-size: 0px;
	padding: 0px;
	margin: 0px;
	width: 100%;
	overflow-x: hidden;
}
.tst {
	font-family: Arial;
	font-size: 20px;
	color: #FFFFFF;
	text-align: center;
	background-color: #FF0000;
	padding: 10px;
	margin: 10px auto 0px auto;
	width: 200px;
	display: block;
	overflow: hidden;
}
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="tst"></div>
<script src="./js_style.js"></script>
</body>
<html>

现在我的问题是，浏览器将以什么顺序执行这些代码，

, 

1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)
5. Styles in JavaScript

还是不同的顺序?我们如何改变顺序呢?

谢谢大家。

CSS未执行。它只是一组规定元素应该是什么样子的规则。

所以，是的，你指定的顺序是正确的，但这并不一定意味着后面的样式会推翻前面的样式。

这里最重要的是CSS选择器的专用性。例如，带有类名的CSS选择器(如.tst)比带有标签名的选择器(如div)更具体。所以如果你有两个选择器，并且它们都设置了测试div的颜色，那么.tst的颜色将被使用在另一个上面。

但是，当选择器具有相同的特异性时，将使用最后遇到的选择器，因此在同一样式表中或在不同的外部样式表中可能会有较晚的选择器。在计算这个时，您提到的顺序很重要。

然而，这种特异性只影响内部和外部样式表。当你有内联样式时，它们总是会推翻样式表中的样式。这同样适用于JavaScript代码，因为它只是改变元素的内联样式。

相关文章：