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

나는 검사하고있어 h2적용을 한 것으로 나타났습니다 - - 회색으로 표시됩니다 구글 크롬의 요소 관리자와 CSS 규칙의 일부를 사용하여 웹 페이지의 요소를. 취소 선은 규칙이 재정의되었음을 나타내는 것으로 보이지만 스타일이 회색으로 표시되면 무엇을 의미합니까?

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

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

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

계승

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

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

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

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

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

기사에서 발췌

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

이는 규칙이 상속되었지만 선택한 요소에 적용 할 수 없음을 의미합니다.

http://code.google.com/chrome/devtools/docs/elements-styles.html#computed_style

창에는 선택한 요소에 직접 적용 할 수있는 규칙의 속성 만 포함됩니다. 상속 된 속성을 추가로 표시하려면 상속 된 속성 표시 확인란을 선택하십시오. 이러한 속성은 희미한 글꼴로 표시됩니다.

실제 예 : "Hello, world!"라는 텍스트가 포함 된 요소를 검사하십시오.

div { 
  margin: 0;
}

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

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

마이클 콜먼이 정답입니다. 그냥 간단한 이미지를 추가하고 싶습니다. 그가 포함 한 링크에는 다음과 같은 간단한 예가 있습니다. http://commandlinefanatic.com/art033ex4.html

HTML / DOM은 다음과 같습니다.

p 요소를 선택할 때 Chrome의 스타일 창은 다음과 같습니다.

보시다시피 p 요소는 조상 (div)에서 상속됩니다. 그렇다면 왜 스타일이 background-color: blue회색으로 표시됩니까? 상속 가능한 스타일이 하나 이상있는 규칙 세트의 일부이기 때문입니다. 상속 가능한 스타일은text-indent: 1em

background-color:blue상속 할 수 없지만 상속 할 수없는 규칙 세트의 일부 text-indent: 1em이며 Chrome 개발자는 규칙 세트를 표시 할 때 완성되기를 원했습니다. 그러나 규칙 집합에서 상속 할 수없는 스타일과 상속 할 수있는 스타일을 구분하기 위해 상속 할 수없는 스타일은 회색으로 표시됩니다.

인스펙터를 통해 스타일을 추가했지만 선택한 요소에 새 스타일이 적용되지 않는 경우에도 마찬가지입니다. 일반적으로 표시된 스타일은 선택한 요소의 스타일 만이므로 회색은 방금 추가 한 스타일이 DOM 네비게이터에 포커스가있는 요소를 선택하지 않음을 나타냅니다.

규칙이 우선 순위가 높은 다른 규칙으로 바뀐 것을 의미합니다. 예를 들어 다음과 같은 스타일 시트가 있습니다.

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

관리자는 규칙이 color:red;회색으로 표시되고 color:blue;정상적으로 표시 됩니다.

CSS 상속 에 대해 읽고 어떤 규칙이 상속 / 우선 순위가 높은지 알아 보십시오 .

편집하다:

믹스 업 : 회색으로 표시된 규칙은 설정되지 않은 규칙으로, 모든 요소 (모든 스타일에 값이 있어야하기 때문에 요소를 렌더링 가능하게 만드는 규칙 )에 적용되는 특수 기본 스타일 시트를 사용합니다 .

웹팩을 사용할 때 소스 코드에서 변경된 CSS 규칙 또는 속성은 재 구축 후 페이지를 다시로드 할 때 회색으로 표시됩니다. 이것은 정말 성가 시며 매번 페이지를 다시로드해야했습니다.

크롬 개발자의 새로운 버전은 그것이 어디에서 상속되었는지를 보여줍니다.

Chome DevTools에서 CSS 코드 블록이 회색으로 표시되고 편집 할 수없는 다른 경우가 발생했기 때문에 질문에 이미 많은 정답이있는 경우 오랫동안 대답하고 있습니다. 문제의 블록에 U + 200B ZERO WIDTH SPACE characters 포함되어 있습니다. 찾은 후 제거하면 Chrome DevTools에서 블록을 다시 편집 할 수 있습니다. 아마도 이것은 ASCII가 아닌 다른 문자에서도 발생할 수 있습니다. 나는 그것을 알아 내려고 시도하지 않았습니다.