[css] Chrome 요소 검사기에서 CSS 규칙이 회색으로 표시되면 무엇을 의미합니까?

나에게 현재 답변이 문제를 충분히 설명하지 못했기 때문에 다른 사람들에게 유용 할 수있는이 답변을 추가하고 있습니다.

회색으로 흐리게 표시된 텍스트는 다음 중 하나 를 의미 할 수 있습니다.

1. 브라우저가 적용되는 기본 규칙 / 속성이며 여기에는 기본 단축 속성이 포함됩니다.
2. 좀 더 복잡한 상속이 필요합니다.

계승

참고 : 세트에서 하나 이상의 규칙이 현재 선택된 DOM 노드에 적용되므로 Chrome 개발 도구의 “스타일”패널에 규칙 세트가 표시됩니다. 완벽을 기하기 위해 개발 도구는 적용 여부에 관계없이 해당 세트의 모든 규칙을 보여줍니다.

상속으로 인해 현재 선택된 요소에 규칙이 적용되는 경우 (즉, 규칙이 조상에 적용되고 선택한 요소가 상속 한 경우) 크롬은 다시 전체 규칙 세트를 표시합니다.

현재 선택된 요소에 적용되는 규칙은 일반 텍스트로 나타납니다.

해당 집합에 규칙이 있지만 상속 할 수없는 속성 (예 : 배경색)이기 때문에 적용되지 않으면 회색 / 흐리게 표시되는 텍스트로 나타납니다.

여기에 좋은 설명을 제공하는 기사가 있습니다-(참고 : 관련 항목은 기사의 맨 아래에 있습니다-그림 21-불행히도 관련 섹션에는 제목이 없습니다) -http : //commandlinefanatic.com/cgi-bin /showarticle.cgi?article=art033

기사에서 발췌

기본 속성 인 속기 속성 때문에이 [상속 시나리오]는 때때로 약간의 혼란을 야기 할 수 있습니다. 그림 21은 상속되지 않은 속성과 함께 글꼴 속성의 기본 단축 속성을 보여줍니다. 요소를 검사 할 때보고있는 컨텍스트를 알고 있어야합니다.

답변

div { 
  margin: 0;
}

div#foo { 
  margin-top: 10px; 
}

<div id="foo">Hello, world!</div>

h2 {
  color: red;
}
h2 {
  color: blue;
}