Chrome의 devtools를 사용하여 요소를 검사하는 동안 요소 탭에서 오른쪽의 '스타일'막대에 해당 CSS 속성이 표시됩니다. 때로는 이러한 속성 중 일부가 취소되었습니다. 이 속성들은 무엇을 의미합니까?Google 크롬 devtools의 교차 스타일 속성은 무엇을 의미합니까?
답변
CSS 속성이 삼진으로 표시되면 건너 뛰기 스타일이 적용되었지만보다 구체적인 선택기, 더 많은 로컬 규칙 또는 같은 규칙 내의 이후 속성에 의해 무시된다는 의미입니다.
(특수한 경우 : 일치하는 규칙에 스타일이 있지만 주석이있는 경우 스타일이 삼진으로 표시되거나 Chrome 개발자 도구에서 해당 스타일을 선택 취소하여 수동으로 사용 중지 한 경우 스타일이 표시됩니다. 스타일이 구문 오류가있는 경우 오류 아이콘이 표시됩니다.)
예를 들어 div
에 배경색이 적용되었지만 다른 배경색이 div
에 적용된 경우 특정 ID가있는 경우 첫 번째 색이 표시되지만 두 번째 색은이 ID로 div
의 속성 목록에서 바뀝니다.
참고로 교차 된 속성은 동일한 CSS 규칙 (CSS 사양에서 필요함)의 나중에 동일한 이름의 속성에 의해 "취소됨"속성 일 수 있습니다. –
@JacobM : striked 속성을 재정의하는 속성을 아는 방법 . – ArunRaj
@ArunRaj - 어떤 속성 (또는 속성)이 교차 된 속성을 재정의하는지 쉽게 알 수있는 방법이 없습니다.하나의 옵션은 "계산 된"스타일 탭을보고 동일한 속성 유형을 찾은 다음 확장하면 해당 속성을 적용하려고하는 다양한 규칙의 소스 (실제로 활성화되어있는 것을 포함하여)를보아야합니다. . 따라서 "font-size : 11px"가 초과 된 경우 "font-size"에 대해 계산 된 속성을 살펴보고 실제로 활성화 된 글꼴 크기를 포함하여 font-size가 적용되는 모든 영역을 확인해야합니다. 희망이 도움이됩니다. –
위의 답변 외에도 나는 실제로 나를 놀라게 한 파업 된 사건을 강조하고 싶습니다.
당신이 사업부에 배경 이미지를 추가하는 경우 : 당신이 당신의 일반 클래스 정의 될 수 있도록 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;
}
밖으로 파업을 당신이 배경 크기을 볼 것이다. 왜 이런지 모르겠지만 네가 그걸로 엉망이되고 싶지 않아.
메모에. @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 **
문제 없음 dude : D – sanjihan
경우가 있고 크롬은 노란색 경고를 표시 그래서 포맷을 나누기. CSS 코드를 다시 포맷해야하며 괜찮습니다.
질문에 "노란 경고"에 관해 묻지 않았습니다. 이 답변은 기껏해야 댓글이어야합니다. – Simon
타격 표시를받은 후에도 스타일을 적용하려면 "!important"
을 사용하여 스타일을 적용 할 수 있습니다. 올바른 해결책은 아니지만 문제를 해결할 수 있습니다.
- 1. 스타일 시트 HTML 정의의 media = ""속성은 무엇을 의미합니까?
- 2. android : progressBar의 progressBarStyle 속성은 무엇을 의미합니까?
- 3. 런타임시 Google 크롬 링크 스타일 시트 태그
- 4. Inspector> Bindings 창에서 IB의 "Controller Key"속성은 무엇을 의미합니까?
- 5. 무엇을 의미합니까?
- 6. jsr 키워드는 무엇을 의미합니까?
- 7. fileno perldoc의이 줄은 무엇을 의미합니까?
- 8. 안드로이드 소스에서 msm은 무엇을 의미합니까?
- 9. 0LL 또는 0x0UL은 무엇을 의미합니까?
- 10. Mono.GetOptions.OptionAttribute의 MaxOccurs 속성은 무엇을 수행합니까?
- 11. AlwaysEnableSilent 속성은 무엇을 위해 사용됩니까?
- 12. 다양한 Tk 커서는 무엇을 의미합니까?
- 13. 크롬 기본 버튼 스타일
- 14. 이것은 무엇을 의미합니까?
- 15. 단위 테스트는 무엇을 의미합니까?
- 16. 벡터화 란 무엇을 의미합니까?
- 17. JSON에서 .d는 무엇을 의미합니까?
- 18. 이 오류는 무엇을 의미합니까?
- 19. "벌크로드"란 무엇을 의미합니까?
- 20. pty와 tty는 무엇을 의미합니까?
- 21. HyperLink에서 EnableViewState는 무엇을 의미합니까?
- 22. 이 오류는 무엇을 의미합니까?
- 23. ACM은 무엇을 의미합니까?
- 24. BatchUpdateException은 무엇을 의미합니까?
- 25. "_"은 무엇을 의미합니까?
- 26. 비동기 ORM은 무엇을 의미합니까
- 27. 힘내 - 무엇을 의미합니까 -m
- 28. "->"PHP에서 무엇을 의미합니까?
- 29. php.ini에서 이것은 무엇을 의미합니까?
- 30. 이벤트 란 무엇을 의미합니까?
나는이 질문을 예상했다. +1. –