downcodes.com의 이전 기사에서 "CSS 파일을 더 체계적이고 명확하게 구조화하기 위해 다시 작성"하는 것에 대해 언급했습니다. 이것이 방법 중 하나이지만 CSS에 대해 제가 좋아하는 것은 항상 좋은 코딩 습관을 기르는 것입니다. 오늘 기사에서는 이 내용을 다룰 것입니다.
정의된 마지막 CSS 스타일은 다음 예와 같이 이전에 정의된 기존 스타일이나 충돌하는 스타일을 재정의합니다.
예제 소스 코드
[www.downcodes.com] p { 색상: 빨간색 배경: 노란색 }
p { 색상: 녹색 }
위 단락은 결국 노란색 배경에 녹색 글꼴로 표시됩니다. 이는 마지막으로 정의된 color:green이 이전에 정의한 빨간색을 덮어쓰기 때문입니다. 노란색 배경이 사라지지 않는 이유는 두 번째 p 때문입니다. 정의의 정의가 충돌하므로 여전히 유효합니다.
정말 이해가 되시나요? 좋습니다. 간단한 테스트를 해보겠습니다.
예제 소스 코드
[www.downcodes.com] p.red { 색상: 빨간색 }
p.green { 색상: 녹색 }
p.blue { 색상: 파란색 }
예제 소스 코드
[www.downcodes.com] <p class="red green blue">샘플 텍스트. downcodes.com</p>
<p class="green blue red">샘플 텍스트. downcodes.com</p>
<p class="blue red green">샘플 텍스트. downcodes.com</p>
위 세 문단의 텍스트가 최종적으로 표시되면 어떤 색상으로 표시되나요?
정답은 모두 파란색, 즉 파란색으로 표시된다는 것입니다. 각 문단마다 3개의 p 스타일이 서로 다른 순서로 적용되어 있지만, 예를 들어 스타일이 적용되는 순서에 따라 색상이 결정되어야 할 것 같습니다. , 첫 번째는 파란색으로 표시되고, 세 번째는 파란색으로 표시되며, 세 번째는 녹색으로 표시됩니다. 이는 실제로는 순서와 관련이 없습니다. 스타일이 적용되는 스타일은 모두 최종적으로 마지막으로 지정된 스타일을 따르며 색상은 파란색입니다.
