크롬의 요소 검사기에서 CSS 규칙이 회색으로 표시되는 것은 무엇을 의미합니까?

크롬의 요소 검사기에서 CSS 규칙이 회색으로 표시되는 것은 무엇을 의미합니까?

사검중입다를 .h2Google Chrome의 요소 검사기를 사용하는 웹 페이지의 요소와 적용된 것으로 보이는 일부 CSS 규칙이 회색으로 표시됩니다.스트라이크 스루는 규칙이 무시되었음을 나타내는 것처럼 보이지만 스타일이 회색으로 표시되면 무엇을 의미합니까?

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

회색/조광된 텍스트는 다음 중 하나를 의미할 수 있습니다.

1. 기본적인 단축 속성을 포함하는 기본 규칙/브라우저가 적용됩니다.
2. 그것은 조금 더 복잡한 상속을 포함합니다.

상속

참고: 집합의 하나 이상의 규칙이 현재 선택된 DOM 노드에 적용되고 있기 때문에 Chrome dev tools "style" 패널에 규칙 집합이 표시됩니다.완전성을 위해 개발 도구는 적용 여부에 관계없이 해당 집합의 모든 규칙을 표시합니다.

상속으로 인해 규칙이 현재 선택된 요소에 적용되는 경우(즉, 규칙이 조상에 적용되고 선택된 요소가 상속됨), Chrome은 전체 규칙 집합을 다시 표시합니다.

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

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

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

기사에서 발췌한 내용

이 [상속 시나리오]는 기본 단축 속성 때문에 때때로 약간의 혼란을 일으킬 수 있습니다. 그림 21은 상속되지 않은 속성과 함께 글꼴 속성의 기본 단축 속성을 보여줍니다.요소를 검사할 때 보고 있는 상황을 주의하십시오.

Michael Coleman의 정답은 맞습니다.간단한 이미지를 추가하여 함께 사용하고 싶습니다.그가 포함한 링크에는 다음과 같은 간단한 예가 있습니다. http://commandlinefanatic.com/art033ex4.html

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

요소를 선택할 때 Chrome의 Styles 창은 다음과 같습니다...

보다시피, 원소는 조상으로부터 물려받습니다.그래서 왜 스타일이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 규칙 또는 속성은 재구성 후 페이지가 다시 로드될 때 회색으로 표시됩니다.이것은 정말 짜증나고 매번 페이지를 다시 불러오도록 강요했습니다.

새로운 버전의 크롬 개발자는 그것이 어디에서 물려받았는지를 보여줍니다.

CSS 코드 블록이 회색으로 표시되고 Chome DevTools에서 편집할 수 없는 다른 사례를 접했기 때문에 질문에 이미 많은 정답이 있는 지 한참 후에 답변합니다.해당 블록에 U+200B ZERO WIDE SPACE 문자가 포함되어 있습니다.일단 그것들을 찾아서 제거하면, 저는 Chrome DevTools에서 블록을 다시 편집할 수 있습니다.아마도 이것은 다른 비아스키 캐릭터들에게도 일어날 수 있을 것입니다, 저는 그것을 알아내려고 노력하지 않았습니다.

언급URL : https://stackoverflow.com/questions/3265555/what-does-it-mean-when-a-css-rule-is-grayed-out-in-chromes-element-inspector