В каком порядке выполняются коды веб-страницы и как мы можем изменить порядок?

В качестве примера можно привести следующие коды.В каком порядке выполняются коды веб-страницы и как мы можем изменить порядок?

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

body { 
 
\t font-size: 0px; 
 
\t padding: 0px; 
 
\t margin: 0px; 
 
\t width: 100%; 
 
\t overflow-x: hidden; 
 
} 
 
.tst { 
 
\t font-family: Arial; 
 
\t font-size: 20px; 
 
\t color: #FFFFFF; 
 
\t text-align: center; 
 
\t background-color: #FF0000; 
 
\t padding: 10px; 
 
\t margin: 10px auto 0px auto; 
 
\t width: 200px; 
 
\t display: block; 
 
\t 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

или в другом порядке? И как мы можем изменить порядок?

Спасибо всем.

источник

2015-09-19 Md. Design Mine

Вы не можете изменить порядок. – jcubic

@ jcubic - это право заказа? –

@ Md.DesignMine - ваша идея 'order' неуместна - стили ** применяется **, не _executed_, используя их ** специфичность ** - https://developer.mozilla.org/en-US/docs/ Web/CSS/Specificity ... –

CSS не выполнен. Это всего лишь набор правил, которые определяют, как должен выглядеть элемент.

Так что да, порядок вы указали правильный порядок, но это не обязательно означает, что позже стиль отменяет ранее один.

Наиболее важным здесь является specificity селектора CSS. Например, селектор CSS с именем класса (например, .tst) более специфичен, чем селектор с именем тега (например, div). Поэтому, если у вас есть оба селектора, и оба они устанавливают цвет вашего тестового div, тогда цвет .tst будет использоваться по сравнению с другим.

Но когда селектора имеют одинаковую специфичность, используется последний, который встречается, поэтому может быть более поздний в той же таблице стилей или в другой внешней таблице стилей. При оценке этого важного порядка вы упомянули.

Однако эта специфика только влияет на внутренние и внешние таблицы стилей. Когда у вас встроенные стили, они всегда отменяют стили в таблице стилей. То же самое касается кода JavaScript, так как он просто меняет встроенный стиль элемента.

источник

2015-09-19 11:50:08 GolezTrol

Большое спасибо за повторное воспроизведение. –

В каком порядке выполняются коды веб-страницы и как мы можем изменить порядок?

ответ

Смежные вопросы