>웹 프론트엔드 >CSS 튜토리얼 >CSS에서 !important의 중요성에 대한 자세한 소개

CSS에서 !important의 중요성에 대한 자세한 소개

黄舟
黄舟원래의
2017-07-27 13:10:522065검색

!important는 CSS에서 매우 중요한 속성이며 때로는 매우 중요한 역할을 합니다. 52CSS.com은 이 분야에 대한 지식이 많지 않습니다. 이에 대한 비교 이해를 위해 다음 기사를 읽어보겠습니다.
며칠 전 CSS 코드를 작성할 때 또 다시 어려웠습니다. 왜냐하면 CSS에 대한 IE6의 지원이 너무 열악하기 때문입니다. 이전에는 제가 만든 것들이 기본적으로 IE를 기반으로 했기 때문에 이전에는 눈치채지 못했습니다. 하지만 제가 이 블로그를 위해 작성한 CSS는 두 개 이상의 브라우저(IE)를 지원해야 합니다. 끔찍한 점은 IE8 브라우저와 함께 제공되는 Windows 7을 설치했다는 것입니다. 그런데 IE6을 열었을 때입니다. , 여전히 정렬 불량이 발생했기 때문에 IE6에서 무슨 일이 일어나고 있는지 확인하기로 결정했습니다.
  모든 CSS 블록을 테두리로 감싸서 IE에서 두 p 사이의 거리가 다른 브라우저보다 확실히 더 넓다는 것을 발견했습니다. 예를 들어 여백 속성이 20px인 p를 작성하면 IE에서는 40px와 같습니다. 이것이 원래 정확도 계산이 옳았지만 IE에서는 잘못 정렬된 이유입니다.
나중에 !important 속성을 보았습니다. 이 속성은 실제로 CSS 사양에 포함되어 있습니다. 그러나 IE6에서는 이를 지원하지 않기 때문에 많은 CSS 사용자가 해결책을 찾았습니다. 일반적으로 CSS에서는 동일한 CSS 블록에 두 개의 동일한 속성을 작성하면 맨 아래 속성이 실제로 실행됩니다. 예:

   1: home{
   2:    margin-left:20px;
   3:    margin-left:40px;
   4: }
   5:

  그런 다음 실행은 실제로 40px를 기반으로 실행됩니다. 실행하려면 !important가 사용자에게 허용되는 것으로 나타납니다. 실행된 문의 우선순위를 설정합니다. 위 명령문을

 1: home{
   2:    margin-left:20px!important;
   3:    margin-left:40px;
   4: }
   5:

로 변경하면 Firefox, Google Chrome 및 IE7 이상에서는 20px로 실행되지만 IE6에서는 !important 사양을 지원하지 않기 때문에 IE6에서는 여전히 40px로 실행됩니다. , 우리는 IE6의 디자인 요구 사항을 충족하기 위해 이 규칙을 따를 수 있습니다. IE6의 표시 효과가 다른 브라우저와 다르다는 것을 확인한 다음 두 개를 설정하고 위쪽에 !important 태그를 추가하면 다음 문장이 필요하지 않습니다. 이렇게 하면 IE6은 다음과 같이 실행됩니다. 선임 CSSer는 다음과 같이 말했습니다. 오늘날의 CSS는 어디에나 중요합니다. 이게 다 빌어먹을 IE6의 잘못이다. IE6는 단지 대사산물 덩어리라고 해도 과언이 아니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.