브라우저가 DOM 요소에 CSS 스타일을 처리하고 적용하는 방법은 무엇입니까?

Question

브라우저가 DOM 요소에 CSS 스타일을 적용하는 일관되고 일반적인 순서가 있습니까?

예를 들어 상자 모델은 margin, border, padding 및 width입니다.

브라우저에서 상자 스타일과 동일한 순서로 나열된 CSS 스타일이 너비, 채우기, 테두리 및 여백과 같이 나열된 CSS 스타일보다 빠르게 처리됩니까?

그리고 모든 CSS 스타일이 처리되는 순서에 대한 표준/규칙이 있습니까?

편집 : 브라우저에서 특정 CSS 스타일을 적용하는 구체적인 순서에 대해 묻습니다. 이것은 보편적 인 표준인가 브라우저인가? 예를 들어 브라우저은 배경색을 적용하기 전에 z- 색인을 적용해야합니까?

Answer 1

CSS 스타일은 항상 외부 스타일 시트 (연결된 순서대로)부터 시작하여 위에서 아래로 적용된 다음 문서 머리 부분의 스타일을 적용한 다음 인라인 스타일을 적용합니다. 나중에 계층 구조의 스타일은 이전에 나타나는 스타일을 덮어 씁니다.

편집 : 내 대답을 수정해야합니다. 특이성 또한 중요한 역할을합니다. 좀 더 구체적으로 정의 된 CSS 선택기 일수록 더 많은 우선 순위가 필요합니다. 동등한 특이성을 가진 선별자는 내가 원래 말했던 방식대로 작용한다.

[http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/]

EDIT # 2 : 셀렉터 주어진 해당 여기에서 찾을 수있다 특이성의 양을 계산하는 좋은 방법은 실제로있다 : [http://www.htmldog.com/guides/cssadvanced/specificity/]

(ID 선택기) #foo 100
(클래스 선택기) .bar 10
(HTML 선택기) html/body/p/span/div/etc이 가치가 가치가 가치가 1

#foo span.bar = 4
(111)
html body p span 등