gpt4 book ai didi

javascript - 网页代码的执行顺序是什么?我们如何更改顺序?

转载 作者:太空宇宙 更新时间:2023-11-04 11:22:26 25 4
gpt4 key购买 nike

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

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 没有被执行。它只是一组规定元素应该是什么样子的规则。

是的,您指定的顺序是正确的,但这并不一定意味着后面的样式会覆盖前面的样式。

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

但是当选择器具有相同的特异性时,会使用遇到的最后一个,所以在同一个样式表中可能有后面的,或者在不同的外部样式表中。对此进行评估时,您提到的顺序很重要。

但是,这种特殊性只会影响内部和外部样式表。当您有内联样式时,它们总是会否决样式表中的样式。这同样适用于 JavaScript 代码,因为它只是更改了元素的内联样式。

关于javascript - 网页代码的执行顺序是什么?我们如何更改顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32667777/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com