특이성을 사용하여 웹 사이트 CSS 스타일을 사용자 정의 CSS로 재정의하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

특이성을 사용하여 웹 사이트 CSS 스타일을 사용자 정의 CSS로 재정의하는 방법은 무엇입니까?

DDD

풀어 주다： 2024-10-24 14:09:02

원래의

285명이 탐색했습니다.

How to Override Website CSS Styles with Custom CSS Using Specificity?

사용자 정의 CSS로 웹사이트 CSS 스타일 재정의

귀하의 웹사이트는 자동으로 포함된 세 개의 CSS 파일로 구성되어 있으며 index.html 파일에 대한 액세스 권한이 없습니다. 그러나 귀하는 웹사이트의 CSS 파일을 제어할 수 있으며 기존 CSS 파일을 재정의하기 위해 새 CSS 파일을 만들려고 합니다.

@import url(css4.css)를 사용하는 것이 첫 번째 시도였을 수도 있지만 실패했습니다. 마지막 CSS 파일의 스타일을 재정의합니다. 이 문제는 "CSS 특이성" 개념에서 비롯됩니다.

CSS 특이성

CSS 특이성은 요소에 대한 스타일 선언의 우선순위를 결정합니다. 이는 네 가지 구성 요소로 구성됩니다.

인라인: 요소에 직접 적용되는 스타일
ID: 요소에 적용되는 스타일 ID
클래스: 클래스가 있는 요소에 적용되는 스타일
요소: 특정 요소 유형의 모든 인스턴스에 적용되는 스타일

각 구성 요소의 무게는 다음 형식으로 표시됩니다. 인라인 | 아이디 | 수업 | 요소. 열의 가중치가 높을수록 구체성이 높아집니다.

특정성 충돌 해결

기존 CSS 스타일을 재정의하려면 새 CSS가 충돌하는 스타일보다 구체성이 더 높은지 확인해야 합니다. 예를 들어, 기존 CSS가 클래스 선택기를 사용하는 경우 사용자 정의 CSS에서 ID 또는 인라인 선택기를 사용해야 합니다.

특정성 예 분석

제공된 코드는 실제 CSS 특수성을 보여줍니다. :

<code class="css">body {margin: 0;padding: 0}
div,article {min-height: 200px;height: 100%;width: 100%}
#id {background-color: green}
.class {background-color: yellow }
section {background-color: blue }
.inline {background-color: purple !IMPORTANT }</code>

로그인 후 복사

인라인 스타일의 background-color를 사용하면 인라인 스타일의 특이도가 더 높음에도 불구하고 빨간색(1|0|0|0)이 보라색으로 나타납니다. 이는 사용자 정의 CSS가 .inline 클래스에 !important를 설정하여 해당 스타일이 다른 모든 클래스보다 우선해야 함을 나타내기 때문입니다.