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

Question

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

Answer 1

CSS 속성이 삼진으로 표시되면 건너 뛰기 스타일이 적용되었지만보다 구체적인 선택기, 더 많은 로컬 규칙 또는 같은 규칙 내의 이후 속성에 의해 무시된다는 의미입니다.

(특수한 경우 : 일치하는 규칙에 스타일이 있지만 주석이있는 경우 스타일이 삼진으로 표시되거나 Chrome 개발자 도구에서 해당 스타일을 선택 취소하여 수동으로 사용 중지 한 경우 스타일이 표시됩니다. 스타일이 구문 오류가있는 경우 오류 아이콘이 표시됩니다.)

예를 들어 div에 배경색이 적용되었지만 다른 배경색이 div에 적용된 경우 특정 ID가있는 경우 첫 번째 색이 표시되지만 두 번째 색은이 ID로 div의 속성 목록에서 바뀝니다.

Answer 2

위의 답변 외에도 나는 실제로 나를 놀라게 한 파업 된 사건을 강조하고 싶습니다.

당신이 사업부에 배경 이미지를 추가하는 경우 : 당신이 당신의 일반 클래스 정의 될 수 있도록 DIV의 크기에 맞게 이미지 크기를 조정하려는

<div class = "myBackground"> 

</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; 
} 

밖으로 파업을 당신이 배경 크기을 볼 것이다. 왜 이런지 모르겠지만 네가 그걸로 엉망이되고 싶지 않아.

Answer 3

메모에. @media 쿼리 (예 : @media screen (max-width:500px)를 사용하는 경우 @media 쿼리 AFTER을 적용하는 데 특히주의하십시오. 일반 스타일은 모두 완료되었습니다. 왜냐하면 @media 쿼리는 (더 구체적 임에도 불구하고) 같은 엘리먼트를 조작하는 css가 뒤따라야하기 때문입니다. 예 : 복사 및 어딘가에서 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 ** 

Answer 4

경우가 있고 크롬은 노란색 경고를 표시 그래서 포맷을 나누기. CSS 코드를 다시 포맷해야하며 괜찮습니다.

Answer 5

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