CSS 코딩 순서는 무엇입니까? CSS 코딩 순서에 대한 자세한 설명

이 기사에서는 CSS 코딩 순서가 무엇인지 설명합니다. CSS 코딩 순서에 대한 자세한 설명은 참고할만한 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS 코딩 순서 연구 마지막으로 정의된 CSS 스타일은 다음 예와 같이 이전에 정의된 모든 기존 또는 충돌하는 스타일을 덮어씁니다.

샘플 코드

p { color: red; background: yellow }
p { color: green }

위 단락은 결국 녹색 글꼴이 노란색으로 나타납니다. background 마지막에 정의된 color:green이 이전에 정의된 red를 덮어쓰기 때문입니다. 노란색 배경이 사라지지 않는 이유는 두 번째 p의 정의가 충돌하는 정의와 일치하지 않기 때문입니다.

정말 이해가 되셨나요? 좋아요, 간단한 테스트를 해보겠습니다:

샘플 코드

p.red { color: red }
p.green { color: green }
p.blue { color: blue }

샘플 코드

<p class="red green blue">http://www.php.cn/</p>
<p class="green blue red">http://www.php.cn/</p>
<p class="blue red green">http://www.php.cn/</p>

죄송합니다. 위 세 문단의 텍스트가 최종적으로 표시되면 어떤 색상으로 표시되나요?

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

위에서 CSS 코딩 순서는 어떻게 되나요? CSS 코딩 순서에 대한 자세한 설명을 소개합니다. CSS3 Tutorial에 대해 더 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 CSS 코딩 순서는 무엇입니까? CSS 코딩 순서에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!