Question

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

＆＃13;

var app = angular.module('postcards', []);//add dependencies in []

app.directive('postcardLink', function () {
    return {
        restrict: "AE",
        template: '<div class="well">{{ ctrl.ownerObj.user }}</div>',
        controller: 'postcardLinkController as ctrl'
    }
});

app.controller('postcardLinkController', [function () {
    this.ownerObj = {
        "user": 'test_owner',
        "pointofthis": 'inane testing'
    }
}]);

＆＃13;

<postcard-link></postcard-link>

＆＃13;

var tst;
tst = document.getElementsByClassName("tst");
tst.style.backgroundColor = "#008000";
tst.style.marginTop = "50px";
tst.innerHTML = "Testing an element.";

＆＃13;

现在我的问题是，浏览器将以何种顺序执行此代码，

等

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;
}

或以不同的顺序？我们怎样才能改变秩序？

谢谢大家。

Answer 1

CSS未执行。它只是一组规则，规定了元素的外观。

所以，是的，你指定的顺序是正确的顺序，但这并不一定意味着后来的风格否决了之前的风格。

这里最重要的是CSS选择器的specificity。例如，具有类名称的CSS选择器（如.tst）比具有标记名称的选择器（如div）更具体。因此，如果您同时拥有两个选择器，并且它们都设置了测试div的颜色，则.tst的颜色将用于另一个。

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

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

执行网页代码的顺序以及如何更改订单？

1 个答案: