스타일시트 순서는 CSS 재정의 우선순위를 어떻게 결정합니까?

CSS의 스타일시트 재정의 순서

HTML에서는 스타일시트를 헤더에 연결하여 웹페이지에 특정 스타일을 적용할 수 있습니다. 이러한 스타일시트의 순서에 따라 어떤 스타일이 우선적으로 적용되는지가 결정됩니다. 설명된 시나리오에서는 두 개의 스타일시트(styles.css 및 master.css)가 연결되어 있습니다.

재정의 순서는 CSS 계단식 규칙을 따릅니다. CSS의 "마지막 줄" 규칙은 마지막으로 선언된 속성 값이 이전의 모든 선언보다 우선하도록 결정합니다. 그러나 이 규칙은 단일 스타일시트에만 적용됩니다. 여러 스타일시트의 경우 다음 규칙이 적용됩니다.

계단식 및 스타일시트 참조

CSS의 계단식 요소는 스타일시트 참조와 동일하게 작동하지 않습니다. 일반적인 CSS 기능. 스타일시트 참조 측면에서 스타일시트가 연결된 순서에 따라 우선순위가 결정됩니다. 마지막으로 연결된 스타일시트는 이전에 연결된 스타일시트에서 충돌하는 모든 규칙을 재정의합니다.

특수성 및 !important

CSS 규칙의 특수성에 따라 가중치가 정의됩니다. 구체성이 높은 규칙은 구체성이 낮은 규칙보다 우선합니다. 구체성은 선택기에서 사용되는 ID, 클래스 및 요소 이름의 수에 따라 결정됩니다. !important 선언은 다른 규칙을 재정의하는 데에도 사용할 수 있습니다.

예

주어진 시나리오에서 master.css는 styles.css 다음에 연결됩니다. 두 스타일시트 모두 body 요소에 대한 규칙을 포함한다고 가정하면 master.css의 규칙은 다음과 같은 이유로 styles.css의 규칙을 재정의합니다.

• master.css가 마지막에 연결됩니다.
• master.css에는 styles.css의 보다 일반적인 규칙을 재정의하는 보다 구체적인 규칙(예: html, body:not(input="button"))이 포함되어 있습니다. (예: 신체).

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