CSS 우선순위 기준

CSS의 속성들이 적용될 때, 여러 규칙이 적용되는 경우 우선순위에 따라 결정됩니다. 이러한 우선순위는 다음과 같은 규칙에 의해 결정됩니다.

1. 인라인 스타일 (Inline Styles): HTML 요소의 style 속성에 직접 지정된 스타일은 가장 높은 우선순위를 가집니다.
   

   /*htmlCopy code*/
   <p style="color: red;">
   이 문장은 빨간색입니다.
   </p>

   
   
   
2. ID 선택자 (ID Selectors): ID 선택자로 지정된 스타일이 인라인 스타일을 제외하고 가장 높은 우선순위를 가집니다.
   

   /*cssCopy code*/
   #myParagraph
   { 
   	color: blue; 
   }

    
   반응형
   
   
3. 클래스 선택자 (Class Selectors), 속성 선택자 (Attribute Selectors), 가상 클래스 및 가상 요소 (Class, Attribute, Pseudo-classes, Pseudo-elements): ID 선택자 다음으로 우선순위가 높습니다.
   

   /*cssCopy code*/
   .highlight
   { 
   	font-weight: bold; 
   } 
   
   [type="text"]
   { 
   	border: 1pxsolid #ccc; 
   }
   
   p:first-child 
   { 
   	font-size: 18px; 
   }

   반응형
   
   
4. 요소 선택자 (Element Selectors): 요소 선택자는 클래스, 속성, 가상 클래스/가상 요소 다음으로 우선순위를 갖습니다.
   

   /*cssCopy code*/
   p
   { 
   	font-style: italic; 
   }

   
   
5. 전체 선택자 (Universal Selector): 전체 선택자는 모든 요소에 스타일을 적용하므로 우선순위가 낮습니다.
   

   /*cssCopy code*/
   * 
   { 
   	margin: 0; 
   	padding: 0; 
   }

   반응형
   
   
6. 상위 요소에서 상속받은 스타일: 부모 요소에서 상속받은 스타일은 해당 속성이 자식 요소에서 지정되지 않은 경우에만 적용됩니다.

결론적으로, 스타일이 충돌하는 경우, 더 구체적인 선택자 또는 높은 우선순위를 가진 스타일이 이길 것이며, 같은 우선순위의 경우에는 후에 나오는 스타일이 이길 것입니다. 이를 CSS의 "우선순위 규칙"이라고 부르며, 이를 이해하고 활용하는 것이 효과적인 스타일링을 위한 중요한 부분 중 하나입니다.