CSS 스타일시트 재정의 순서는 어떻게 작동하나요?

CSS 스타일시트 재정의 순서: 이해하기

HTML 헤더에서 여러 스타일시트를 참조할 수 있으므로 스타일시트의 순서에 대한 의문이 제기됩니다. 상위. 이 문서에서는 재정의 작동 방식을 명확히 하기 위해 CSS 스타일시트의 계단식 특성을 살펴봅니다.

제공된 예에서 헤더에는 "styles.css" 및 "master.css"에 대한 참조가 포함되어 있습니다. 후자는 나중에 캐스케이드에 나타나므로 전자보다 우선합니다. 그러나 구체성도 중요한 역할을 합니다.

CSS 계단식 규칙에 따르면 보다 구체적인 규칙이 보다 일반적인 규칙보다 우선합니다. 다음을 고려하십시오.

body { margin:10px; }

이 규칙은 모든 요소에 10px 여백을 적용합니다. 그러나 보다 구체적인 규칙은 다음과 같습니다.

html, body:not(input="button") {
    margin: 0px;
    padding: 0px;
    border: 0px;
}

이 규칙은 특정 요소(html 및 본문)를 대상으로 하고 입력 버튼을 제외하기 때문에 이전 규칙보다 우선합니다. 이 규칙은 캐스케이드 후반부에 나타나며 더 구체적이므로 우선순위가 높습니다.

구체성은 ID 수, 클래스, 요소 이름과 같은 요소를 기반으로 계산된다는 점에 유의하는 것이 중요합니다. 선택자. 또한 !important 선언은 다른 모든 규칙을 재정의할 수 있습니다.

CSS 스타일시트의 계단식 특성과 특수성을 이해함으로써 개발자는 자신의 디자인이 의도한 대로 렌더링되도록 할 수 있습니다. 규칙 우선순위에 대한 자세한 내용은 W3C 사양(http://www.w3.org/TR/2011/REC-CSS2-20110607/cascade.html#cascade)을 참조하세요.

위 내용은 CSS 스타일시트 재정의 순서는 어떻게 작동하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!