Chrome devtools의 교차 스타일 속성은 무엇을 의미합니까?

Chrome의 devtools를 사용하여 요소를 검사하는 동안 요소 탭에서 오른쪽 '스타일'막대에 해당 CSS 속성이 표시됩니다. 때로는 이러한 속성 중 일부가 잘못되었습니다. 이 속성들은 무엇을 의미합니까?

CSS 속성이 잘림으로 표시되면 교차 스타일이 적용되었지만보다 구체적인 선택기, 더 많은 로컬 규칙 또는 동일한 규칙 내의 이후 속성에 의해 재정의되었음을 의미합니다.

(특별한 경우 : 스타일이 일치하는 규칙에 있지만 주석 처리되었거나 Chrome 개발자 도구 내에서 체크 표시를 해제하여 수동으로 사용 중지 한 경우 스타일도 유사로 표시됩니다. 또한 교차로 표시됩니다. 스타일에 구문 오류가있는 경우 오류 아이콘이 표시됩니다.)

예를 들어, 배경색이 모든에 적용 div되었지만 div특정 ID를 가진에 다른 배경색이 적용된 경우 첫 번째 색상이 표시되지만 두 번째 색상이 교체되었으므로 (속성에서) div해당 ID를 가진 목록 ).

부수적으로. @media 쿼리 (예 :) 를 사용하는 경우 일반 스타일을 사용한 후에@media screen (max-width:500px @media 쿼리를 적용 할 때 특히주의하십시오 . @media 쿼리는 동일한 요소를 조작하는 CSS가 뒤에 오는 경우 (더 구체적이지만) 생략됩니다. 예:

@media (max-width:750px){
#buy-box {width: 300px;}
}

#buy-box{
width:500px;
}

** width will be 500px and 300px will be crossed out in Developer Tools. **

#buy-box{
width:500px;
}

@media (max-width:750px){
#buy-box {width: 300px;}
}

** width will be 300px and 500px will be crossed out **

위의 답변 외에도 나는 정말 놀랐던 파업 재산의 사례를 강조하고 싶습니다.

div에 배경 이미지를 추가하는 경우 :

<div class = "myBackground">

</div>

div의 크기에 맞게 이미지의 크기를 조정하여 이것이 일반적인 클래스 정의가되도록합니다.

.myBackground {

 height:100px;
 width:100px;
 background: url("/img/bck/myImage.jpg") no-repeat; 
 background-size: contain;

}

그러나 주문을 다음과 같이 교환하면 :-

.myBackground {
 height:100px;
 width:100px;
 background-size: contain;  //before the background
 background: url("/img/bck/myImage.jpg") no-repeat; 
}

그런 다음 크롬에서 배경 크기 가 표시됩니다. 나는 이것이 왜인지 확실하지 않지만, 그래 당신은 그것을 엉망으로 만들고 싶지 않습니다.

타격 표시를받은 후에도 스타일을 적용하려면 스타일을 적용하는 데 사용할 수 있습니다 "!important". 올바른 해결책은 아니지만 문제를 해결할 수 있습니다.

어딘가에 CSS 코드를 복사하여 붙여 넣을 때 형식이 깨져서 Chrome에 노란색 경고가 표시되는 경우가 있습니다. CSS 코드를 다시 포맷하려고 시도하면 문제가 없습니다.