더 높은 특정성을 가진 새로운 CSS 파일을 사용하여 웹사이트의 CSS를 재정의하는 방법은 무엇입니까?

새 CSS 파일을 사용하여 웹사이트의 CSS 파일을 어떻게 재정의할 수 있나요?

챌린지:

웹사이트가 있습니다 여러 CSS 파일이 있지만 소스 코드에 대한 액세스가 부족합니다. index.html 파일을 수정하는 기능 없이 기존 스타일을 재정의하는 새 CSS 파일을 생성하려고 합니다.

해결책:

CSS 특이성 이해 :

기존 스타일을 재정의하려면 CSS 특정성 개념을 이해해야 합니다. 구체성은 사용된 선택기에 따라 요소에 적용되는 스타일을 결정합니다. 다양한 선택기 유형(인라인, ID, 클래스, 요소) 수를 연결하여 계산됩니다.

더 구체적인 선택기 사용:

자신만의 선택기를 보장하려면 CSS 파일이 우선순위를 갖습니다. 현재 CSS 파일의 선택기보다 특정도가 더 높은 선택기를 사용하세요. 예를 들어 ".myClass"와 같은 선택기는 0/0/1/0의 구체성을 갖고 "div"와 같은 선택기를 0/0/0/1의 구체도로 재정의합니다.

구체성 적용:

다음 시나리오를 상상해 보세요.

• currentCSS1.css에는 본문에 대한 규칙이 있습니다(구체성: 0/0/0/1)
• currentCSS2.css에는 .myClass에 대한 규칙이 있습니다(구체성: 0/0/1/0)
• newCSS4.css에는 .myClass에 대한 규칙이 있습니다(구체성: 0/0/2/0)

CSS 특정 규칙에 따라 newCSS4.css에 정의된 스타일은 .myClass 클래스가 있는 요소에 대해 currentCSS1.css 및 currentCSS2.css의 스타일을 재정의합니다.

주의 !important 사용:

!important를 사용하면 스타일에 우선순위를 부여할 수 있지만 일반적으로 사이트 전체 CSS에서는 권장되지 않습니다. 페이지별 CSS에만 사용하거나 외부 CSS를 재정의하는 데 사용하세요.

구체성 계산:

구체성 계산은 다음 계층 구조를 참조하세요.

• 인라인(1|0|0|0)
• ID(0|1|0|0)
• 클래스(0|0|1|0)
• 요소(0|0|0|1)

왼쪽에서 가장 높은 숫자가 우선합니다.

예:

가정 현재 CSS 파일에는 다음 규칙이 있습니다.

<code class="css">body { margin: 0; }
#header { background: blue; }</code>

새 CSS 파일을 사용하여 이러한 규칙을 재정의하려면 다음 선택기를 사용할 수 있습니다.

<code class="css">#header.myClass {
  margin: 1em;
  background: red;
}</code>

선택기 #header.myClass 0/1/1/1의 구체성을 가지며 이는 현재 CSS 파일의 두 규칙을 모두 재정의합니다.

위 내용은 더 높은 특정성을 가진 새로운 CSS 파일을 사용하여 웹사이트의 CSS를 재정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!