CSS 우선순위에 대한 우리의 이해에 따르면 마지막으로 정의된 CSS 스타일은 다음 예와 같이 이전에 정의된 모든 기존 스타일 또는 충돌하는 스타일을 재정의합니다.
| 인용된 내용은 다음과 같습니다. 예제 소스 코드: p { 색상: 빨간색 배경: 노란색 } |
위 단락은 결국 노란색 배경에 녹색 글꼴로 표시됩니다. 이는 마지막으로 정의된 color:green이 이전에 정의한 빨간색을 덮어쓰기 때문입니다. 노란색 배경이 사라지지 않는 이유는 두 번째 p 때문입니다. 정의의 정의가 충돌하므로 여전히 유효합니다.
실행 효과를 살펴보겠습니다.
| 인용된 내용은 다음과 같습니다. 실행할 소스 코드: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>admin5</title>< style type="text/css">p { 색상: 빨간색; 배경: 노란색 }p { 색상: 녹색 }</style></head><body><p>admin5</p></body></ HTML> <p class="red green blue">www.admin5.com</p> <p class="green blue red">관리자5</p> <p class="파란색 빨간색 녹색">www.admin5.com</p> |
어쩌면 당신은 이미 이해했다고 생각할 수도 있습니다. 정말 이해가 되시나요? 좋습니다. 간단한 테스트를 해보겠습니다.
| 인용된 내용은 다음과 같습니다. 예제 소스 코드: .red { 색상: 빨간색 } .green { 색상: 녹색 } .blue { 색상: 파란색 } ... <p class="red green blue">admin5</p> <p class="green blue red">웹마스터의 학습 천국</p> <p class="파란색 빨간색 녹색">www.admin5.com</p> |
위 세 문단의 텍스트가 최종적으로 표시되면 어떤 색상으로 표시되나요?
서두르지 말고 다음 코드를 실행해 보세요. 어떤 색상이 될까요?
좋아요, 당신은 이미 그것에 대해 생각했습니다. 이제 작업의 효과를 살펴보겠습니다.
| 인용된 내용은 다음과 같습니다. 실행할 소스 코드: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns=" http ://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>www.admin5.com< /title><style type="text/css">.red { 색상: 빨간색 }.green { 색상: 녹색 }.blue { 색상: 파란색 }</style></head><body><p class=" red green blue">admin5</p><p class="green blue red">웹마스터 학습의 천국</p><p class="blue red green">www.admin5.com</p></body > </html> |
정답은 모두 파란색, 즉 파란색으로 표시된다는 것입니다. 각 문단마다 3개의 문단 스타일이 서로 다른 순서로 적용되어 있지만, 예를 들어 스타일이 적용되는 순서에 따라 색상이 결정되어야 할 것 같습니다. , 첫 번째는 파란색으로 표시되고, 두 번째는 빨간색으로 표시되고, 세 번째는 녹색으로 표시됩니다. 이는 실제로 순서와 관련이 없습니다. 스타일이 적용되는 경우에는 모두 최종적으로 지정된 스타일을 따르며 색상은 파란색입니다. 위의 실험을 통해 이미 답을 얻었으므로 앞으로 비슷한 문제가 발생하더라도 걱정하지 마십시오.