동일한 텍스트에 두 개 이상의 CSS 규칙을 적용하면 규칙이 충돌하여 예기치 않은 결과가 발생할 수 있습니다. 브라우저는 다음과 같이 CSS 규칙을 적용합니다.
동일한 텍스트에 두 개의 규칙이 적용되는 경우 특정 속성이 충돌하지 않는 한 브라우저는 두 규칙의 모든 속성을 표시합니다. 예를 들어, 한 규칙에서는 텍스트 색상을 파란색으로 지정하고 다른 규칙에서는 텍스트 색상을 빨간색으로 지정할 수 있습니다.
동일한 텍스트에 적용되는 두 규칙의 속성이 충돌하는 경우 브라우저는 가장 안쪽 규칙(텍스트 자체에 가장 가까운 규칙)의 속성을 표시합니다. 따라서 외부 스타일 시트와 인라인 스타일이 모두 텍스트 요소에 영향을 미치는 경우 인라인 스타일이 적용됩니다.
사용자 정의 CSS 규칙(class 속성을 사용하여 적용되는 규칙)의 속성은 직접적인 충돌이 있는 경우 HTML 태그 스타일의 속성을 재정의합니다.
다음 예에서 h1에 대해 정의된 스타일은 모든 h1 단락의 글꼴, 크기 및 색상을 지정하지만 해당 단락에 적용된 사용자 정의 CSS 규칙 .Blue는 h1 스타일의 색상 설정을 재정의합니다. 또 다른 사용자 정의 CSS 규칙인 .Red는 .Blue 스타일 내에 있기 때문에 .Blue를 재정의합니다.
<h1><span class="Blue">이 단락은 .Blue 사용자 정의 스타일과 h1에 의해 제어됩니다.
HTML 태그 스타일.<span class="Red">이 문장을 제외하고는 .Red 스타일로 제어됩니다.</span>
이제 .Blue 스타일로 돌아왔습니다.</span></h1>