CSS 코딩 효율성을 향상시키고, CSS 코딩 순서를 연구하여 더욱 전문적으로 만듭니다.

downcodes.com의 이전 기사에서 "CSS 파일을 더 체계적이고 명확하게 구조화하기 위해 다시 작성"하는 것에 대해 언급했습니다. 이것이 방법 중 하나이지만 CSS에 대해 제가 좋아하는 것은 항상 좋은 코딩 습관을 기르는 것입니다. 오늘 기사에서는 이 내용을 다룰 것입니다.

정의된 마지막 CSS 스타일은 다음 예와 같이 이전에 정의된 기존 스타일이나 충돌하는 스타일을 재정의합니다.


위 단락은 결국 노란색 배경에 녹색 글꼴로 표시됩니다. 이는 마지막으로 정의된 color:green이 이전에 정의한 빨간색을 덮어쓰기 때문입니다. 노란색 배경이 사라지지 않는 이유는 두 번째 p 때문입니다. 정의의 정의가 충돌하므로 여전히 유효합니다.
정말 이해가 되시나요? 좋습니다. 간단한 테스트를 해보겠습니다.



위 세 문단의 텍스트가 최종적으로 표시되면 어떤 색상으로 표시되나요?
정답은 모두 파란색, 즉 파란색으로 표시된다는 것입니다. 각 문단마다 3개의 p 스타일이 서로 다른 순서로 적용되어 있지만, 예를 들어 스타일이 적용되는 순서에 따라 색상이 결정되어야 할 것 같습니다. , 첫 번째는 파란색으로 표시되고, 세 번째는 파란색으로 표시되며, 세 번째는 녹색으로 표시됩니다. 이는 실제로는 순서와 관련이 없습니다. 스타일이 적용되는 스타일은 모두 최종적으로 마지막으로 지정된 스타일을 따르며 색상은 파란색입니다.