웹 CSS 우선순위

여러 CSS 스타일 파일이 웹 페이지에 로드됩니다. 그 중 하나는 Ext 라이브러리와 함께 제공되는 스타일 파일로, 모든 태그에 대한 일부 스타일을 정의하여 원본 웹 페이지가 잘못 표시됩니다. 해당 스타일을 찾으면 올바른 스타일이 재설정됩니다. body 태그에 새 스타일을 추가했지만 두 가지 스타일이 나타나고 Ext 스타일은 여전히 ​​유효합니다. 마지막으로 새 스타일을 설정할 때 *를 추가하지 않았으므로 본문 태그에만 유용하고 하위 태그에는 유용하지 않다는 사실을 발견했습니다. 다음은 수정된 스타일입니다

[css]  
.diy,  
.diy *{  
    box-sizing: content-box;  
    -moz-box-sizing : content-box;  
    -webkit-box-sizing: content-box;  
}

태그가 여러 스타일로 정의되어 스타일 간에 충돌이 있는 경우 우선순위는 "ID에 정의된 스타일" > 클래스 정의 스타일" > "레이블 유형에 대해 정의된 스타일". 예를 들어 6ecf4da4ff7c58a308727a236954db49 태그의

[css] 
div{  
    border:2px solid #0000FF;   
}  
  
  
.powerHeader{  
    border:2px solid #00ff00;   
}  
  
  
#navigation{  
    border:2px solid #ff0000;   
}

스타일에서는 #navigation이 먼저 적용되고, # 탐색이 존재하지 않습니다. .powerHeader 스타일이 먼저 적용되고 div 스타일이 마지막에 적용됩니다.

동시에 링크나 스타일만 사용하여 정의한 여러 태그 클래스 간에 충돌이 있는 경우 마지막에 정의한 클래스가 적용됩니다.

CSS 스타일 우선순위를 이해하면 웹 개발 시 많은 스타일 충돌 문제를 피할 수 있습니다.