CSS에서 !important의 역할

!important는 CSS1에 정의된 구문으로, 지정된 스타일 규칙의 적용 우선순위를 높이는 데 사용됩니다. 구문 형식 { cssRule !important }

{*cssRule !important} 이 CSS 규칙은 웹 페이지 제작에서 매우 인기가 있었습니다. 예전에는 "브라우저에서 인식하는지 여부"라는 단계에 머물렀습니다. “'별로 공부하진 않았지만 지금은 상황이 달라졌어요. 몇 가지 예를 살펴보겠습니다.

예 1:

CSS

#Box {

color: red !important;

color: blue;

패딩: 30px;

너비: 300px;

테두리: 1px 솔리드 핑크;

}

Html

다른 브라우저에서는 이 텍스트 줄의 색상이 달라야 합니다!

그러면 Firefox, Opera, Chrome 등 이 구문을 지원하는 브라우저에서는 !important의 우선순위를 알 수 있으며 글꼴 색상이 빨간색으로 표시됩니다. , IE에서는 파란색으로 표시됩니다. IE 브라우저는 !important를 인식하지 못하기 때문에 IE가 아닌 브라우저는 !important를 인식하며 !important의 우선순위가 더 높습니다. 그러면 다음 예를 보세요. CSS 스타일에서 색상 속성의 순서를 바꾸면 Html 코드 부분은 변경되지 않고 그대로 유지됩니다.

CSS

#Box {

색상: 파란색;

색상: 빨간색 !important;

padding: 30px;

width : 300px;

border:1px solid pink;

}

따라서 이 경우 IE 브라우징 여부는 아래에서 확인하세요. 브라우저와 IE가 아닌 브라우저에서는 인식 시 글꼴 색상이 빨간색으로 표시됩니다. IE 브라우저는 !important를 인식하지 못하더라도 "color: red !important;" 문장에서 color:red를 인식합니다. 따라서 IE에서는 브라우저가 먼저 "color: blue"를 인식한 다음 "color: red !important;"에서 color: red를 인식하므로 이전의 "color:

blue"를 덮습니다. 결국 글꼴 색상은 빨간색으로 표시됩니다.