Chrome DevTools에서 일부 CSS 속성이 지워진 이유는 무엇입니까?

Chrome DevTools의 줄이 그어진 CSS 속성: 이유 찾기

Chrome 개발 도구에서 HTML 요소를 검사할 때 줄이 그어진 부분이 나타날 수 있습니다. '스타일' 창의 CSS 속성. 줄이 그어진 속성은 요소의 스타일을 밝히는 특정 동작을 나타냅니다.

줄이 그어진 속성의 의미

줄이 그어진 속성은 기본 스타일을 나타냅니다. 처음에는 적용되었지만 나중에는 더 구체적인 선택기, 더 지역적인 규칙 또는 동일한 규칙 내의 최신 속성에 의해 재정의되었습니다. 이 동작은 CSS 규칙이 구체성과 우선 순위에 따라 적용되기 때문에 발생합니다.

특수 사례

앞서 언급한 이유 외에도 줄이 그어진 속성은 다음을 나타낼 수도 있습니다. 다음 특수 사례:

• 주석 처리된 스타일: 일치 규칙에 존재하지만 주석 처리된 스타일.
• 수동으로 비활성화된 스타일: Chrome 개발자 도구 내에서 선택을 취소하여 수동으로 비활성화한 스타일.
• 구문 오류: 구문 오류가 포함된 스타일, 줄이 그어진 텍스트 옆에 오류 아이콘으로 표시됨 .

예

다음 예를 고려하세요.

<code class="html"><div id="my-div"></div></code>

<code class="css">/* Initially, all divs have a white background. */
div {
  background-color: white;
}

/* However, this rule overrides the previous one for divs with id "my-div". */
#my-div {
  background-color: blue;
}</code>

Chrome devtools에서 "my-div"를 검사합니다. " 요소에는 "배경색: 흰색"이 지워져 표시됩니다. 이는 초기 흰색 배경색이 ID가 "my-div"인 div에 지정된 후속 파란색 배경색으로 재정의되었음을 나타냅니다.

위 내용은 Chrome DevTools에서 일부 CSS 속성이 지워진 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!