Chrome DevTools에서 스타일을 재정의하는 특정 CSS 규칙을 어떻게 찾을 수 있나요?

Chrome 개발자 도구에서 재정의된 CSS 규칙 공개

Chrome 개발자 도구에서 웹 요소를 검사하면 재정의된 스타일이 드러나는 경우가 많습니다. 그러나 이러한 재정의를 담당하는 규칙을 찾는 것은 다소 어려울 수 있습니다. 하지만 Chrome은 이 문제를 해결하기 위한 영리한 메커니즘을 제공하므로 걱정하지 마세요.

우선의 스타일 규칙 공개

우선의 규칙을 추적하려면 컴퓨팅 스타일 요소 검사기 패널. 관심 있는 특정 스타일 속성을 확장하세요. 짜잔! 관찰된 스타일 재정의에 책임이 있는 승리한 승자를 보여주는 적용 가능한 모든 CSS 규칙 목록이 표시됩니다.

예를 들어 재정의된 "글꼴 크기" 속성이 있는 요소를 살펴보겠습니다. 계산된 스타일 패널에서 이 속성을 확장하면 다음과 같은 결과가 나타납니다.

font-size: 16px;
   - overridden by <link href="style2.css" rel="stylesheet"> line 10
   - origin: <inline style>

이것은 원래 "font-size" 값이 인라인으로 설정되었지만 재정의는 "style2.css"에서 온 것임을 나타냅니다. line 10. 이렇게 간단해요!

위 내용은 Chrome DevTools에서 스타일을 재정의하는 특정 CSS 규칙을 어떻게 찾을 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!