Chrome 개발자 도구 : CSS 규칙을 재정의하는 것이 무엇인지 찾는 방법은 무엇입니까?

196

글쎄, 이것은 매우 간단합니다. Chrome의 개발자 도구에서 스타일이 재정의되었다는 메시지가 표시되면 어떤 CSS 규칙이 재정의하고 있는지 확인하는 방법은 무엇입니까?

"이것보다 우선하는 것이 무엇인지 보여주세요" 와 같은 것이 있는지 알고 싶습니다 .

OBS : 제발, Firebug를 지시하지 마십시오.

css google-chrome developer-tools inspector

— 라몬 케이
소스

크롬의 개발자 도구는 당신에게 무시 규칙 표시

— 졸탄 토스

답변:

283

요소 관리자 의 계산 스타일 패널을 사용하십시오 . 관심있는 속성을 확장하여 적용 가능한 규칙 목록과이긴 규칙을 확인하십시오.

크롬 스크린 샷

— josh3736
소스

나에게 계산 탭은 기본적으로 열려 있으므로 탭으로 나열되지 않았습니다. 헤더에는 'Computed'라는 제목이 있어야합니다. 그렇지 않으면 오랫동안 찾을 수 있습니다.

— MrFox

Chrome이 발전함에 따라 기술이 약간 변경되었습니다. '관심 속성 확장'대신 속성 옆에있는 스파이 유리를 클릭하면 스타일 탭에서 어떤 스타일로 돌아 왔는지 표시됩니다.

— intotecho

@intotecho : Chrome 47은 돋보기 변경으로 인해 계산 탭에서 확장을 복원했습니다. crbug.com/496263

— josh3736

모두 취소하면 어떻게 되나요? 아마도 스크립트 때문에? 누가 그랬는지 어떻게 알아?

— darkgaze

여전히 요소 패널에 "계산 된"탭이 있습니다.

— josh3736

파업되지 않은 동일한 이름을 가진 것들을 간단히 볼 수 있습니다. 목록이 중요하다는 것을 기억하십시오.

또는 계산 된 스타일을 볼 수 있습니다. 실제로 적용되는 스타일이됩니다.

— 사용자 1902091
소스

crtrl + shift + c 및 요소를 검사하십시오. 그런 다음 오른쪽 아래 모서리에있는 상자에서 선이없는 스타일을 찾으십시오.

재정의는 대부분의 경우 맨 위에 있습니다 (이 스타일은 "우승"이므로 선을 통과하지 않음).

— 피터 라스무센
소스

! 중요한 스타일로 플래그가 지정된 경우는 그렇지 않습니다

— JCorriveau