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

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

Chrome의 devtools를 사용하여 요소를 검사하는 동안 요소 탭의 오른쪽에 있는 'Styles' 막대는 해당 CSS 속성을 보여줍니다.때때로 이러한 속성 중 일부는 삭제됩니다.이러한 속성은 무엇을 의미합니까?

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

(특별한 경우: 스타일이 일치하는 규칙에 존재하지만 주석 처리된 경우 또는 Chrome 개발자 도구 내에서 선택 취소하여 수동으로 비활성화한 경우 스타일이 Strike-through로 표시됩니다.또한 스타일에 구문 오류가 있는 경우 오류 아이콘과 함께 지워진 것으로 표시됩니다.)

예를 들어, 배경색이 모두에 적용된 경우div에 다른 배경색이 되었습니다.divID의 첫 이 대체되었기 S 특를 ID ▁list▁for▁▁the▁s(in▁with▁the를▁s▁the▁will▁has,▁out서,다▁the▁be▁crossed에제▁a▁will).div그 아이디로).

사이드 노트에.@media 쿼리를 사용하는 경우(예:@media screen (max-width:500px)) 일반적인 스타일을 마친 후 @media query를 적용하는 데 특히 주의를 기울입니다.왜냐하면 @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; 
}

크롬에서는 배경 크기가 제외된 것을 볼 수 있습니다.왜 그런지는 모르겠지만, 당신은 그것을 망치고 싶지 않습니다.

를 받고 Strike-through를 사용하면 됩니다."!important"스타일을 강화합니다.그것은 올바른 해결책이 아닐 수도 있지만 문제를 해결합니다.

어떤 규칙이 우선하는지 알 수 있는 두 가지 방법이 있습니다.

1. 스타일 탭의 맨 위에 있는 필터 상자에서 속성을 검색합니다.속성이 노란색으로 강조 표시된 상태에서 해당 속성을 포함하는 모든 규칙이 표시됩니다.

   

2. 계산됨 탭에서 동일한 속성 유형을 찾은 다음 확장하여 해당 속성을 적용하려는 다양한 규칙의 소스를 확인합니다.

   

이는 설정하는 것을 잊어버린 경우에도 발생합니다.Unit가치가 있는
예:
margin-left: -53
대신에
margin-left: -53px;

제 문제는 제이콥 매티슨의 마지막 요점 또는 "같은 규칙 내의 나중 재산"에 의해 해결되었습니다.

미디어 쿼리를 CSS 파일의 맨 아래에 배치해야 합니다.

/*Doesn't work  */
@media (max-width: 480px) {
  body {
    color: red;    
  }
}
body {
  font-family: system-ui;
  color: cornflowerblue;
  margin: 0;  
}
/* works!  */
@media (max-width: 480px) {
  body {
    color: green;    
  }
}

예:

https://codepen.io/grumbles/pen/XWxWRJJ

CSS 코드를 복사해서 어딘가에 붙여넣으면 포맷이 깨져서 크롬에서 노란색 경고가 나오는 경우가 있습니다.당신은 CSS 코드를 다시 포맷해야 합니다. 그러면 괜찮을 것입니다.

언급URL : https://stackoverflow.com/questions/3047056/what-do-the-crossed-style-properties-in-google-chrome-devtools-mean