CSS 우선순위 소개

CSS 순서와 우선순위는 웹페이지 스타일링에서 어려운 부분입니다. 언젠가는 적용하려고 했던 CSS 스타일이 작동하지 않는다는 것을 알게 될 수도 있습니다. 웹페이지에서 코드가 실행되지 않는 것 같습니다. 이는 CSS 순서 또는 우선순위 충돌로 인해 발생할 수 있습니다. 이 기사에서는 CSS 순서와 우선순위가 무엇인지, 그리고 이것이 웹 페이지 스타일 지정에 어떤 영향을 미치는지 살펴보겠습니다.

Priority

브라우저는 요소와 관련된 CSS 속성 값을 결정합니다. 이 규칙은 CSS 선택기가 다양한 유형의 규칙을 구성하는 방식을 기반으로 합니다. 우선순위는 특정 CSS 선언에 가중치를 부여하는 정확한 이름입니다. 각 선언의 가중치 또는 "중요도"는 일치하는 선택기와 동일한 여러 선택기 유형에 의해 결정됩니다. (추천 읽기: CSS 우선순위 계산 방법?and css 스타일 우선순위 순서)# 🎜 🎜#

우선순위는 요소에 여러 선언이 있는 경우에만 적용되며 대상 요소는 선택기의 고유 값에 따라 우선순위를 갖습니다. 다음은 선택기 값의 차이를 측정하는 목록입니다:

유형 선택기: 이것은 의사 요소이거나 h1, h1 등과 같은

클래스입니다. 클래스 선택기: 여기에는 hover 등과 같은 속성 선택기와 의사 클래스가 포함됩니다. ID 선택기: 모든 유형의 ID 선택기.

범용 선택자는 우선순위에 영향을 주지 않으며 일부에는 (+, -, >, ~)와 같은 조합 선택자가 포함됩니다. 이전에 인라인 스타일(예: 굵게 표시)은 항상 외부 스타일 시트의 스타일을 재정의하고 가장 높은 우선순위로 체인의 맨 위에 위치한다고 언급했습니다.

진행하기 전에 알아두셔야 할 몇 가지 규칙이 있습니다. 인라인 CSS에서 html의 스타일 속성은 스타일과 CSS 파일의 최우선 규칙입니다. 특정 선택자는 덜 지정된 선택자보다 우선합니다. 문서 뒷부분의 코드는 이전에 설정된 이전 역할을 덮어씁니다.

주의:! importantExceptions

이 모든 특이성 규칙의 예외는 전화할 때입니다! 중요한 방법. 호출되면 다른 모든 선언을 재정의합니다. 이것이 효과가 있기는 하지만 일반적으로 나쁜 습관입니다. 이는 워크시트의 자연스러운 연속성을 깨뜨리고 디버깅을 어렵게 만듭니다. 이를 사용하지 않는 가장 좋은 방법은 간단합니다. 먼저, 다른 스타일 요소보다 먼저 우선순위를 확인하려면 특정성 규칙을 살펴봐야 합니다. 꼭 사용해야 한다면! 중요합니다. 한 페이지에만 적용하여 현명하게 사용하세요.

Cascadeability

캐스케이드를 사용하는 것보다 더 잘 사용할 수 있습니다! 중요한 방법. CSS나 캐스케이딩 스타일 시트(Cascading Style Sheets)의 기본 측면에 익숙하지 않은 사람을 위해 캐스케이딩은 서로 다른 속성의 값을 함께 결합하는 방법에 대한 알고리즘입니다.

Cascading은 먼저 요소나 속성에 적용되는 모든 CSS 선언을 찾는 방식으로 작동합니다. 이는 출처(선언된 위치)부터 시작하여 선언의 중요성입니다. 그런 다음 특이성을 계산합니다. HTML 파일에 포함된 CSS는 순서에 관계없이 외부 스타일 시트를 따릅니다. 캐스케이드가 수행할 단계를 인식하는 것이 중요합니다.

일반적으로 경쟁하는 스타일 요소 간에 충돌이 있는 경우 고려해야 할 구체성 문제가 있습니다. 요소가 코딩하지 않은 경우와 동일한 방식으로 동작하는 경우 우선순위가 더 높은 항목의 스타일을 상속하는 것입니다. 이 문제가 발생하지 않도록 최소한의 구체적으로 스타일 지정을 시작하십시오.

위 내용은 CSS 우선순위 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!