CSS 스타일의 초과 기호 사용 및 CSS의 상속 방법 정보

상속은 우리 프로그램에 어떤 문제를 가져오기 때문에 상속의 원리를 진지하게 연구해야 합니다. 여기에 상속을 처리하는 방법에 대한 좋은 예가 있습니다. 관심 있는 친구들은 이를 참고할 수 있습니다.

상속은 프로그램을 어느 정도 쉽게 만듭니다. 작성 과정에서는 더 편리하지만 때로는 프로그램에 특정 문제를 일으킬 수 있으므로 상속의 원리와 이를 처리하는 방법을 주의 깊게 연구하는 것이 중요합니다. 다음은 CSS에서 상속을 처리하는 방법입니다.

CSS 코드에서 보다 큼 기호(>)를 보았습니다. 코드는 다음과 같습니다.

BODY#css-zen-garden > p#extrap2 { 
BACKGROUND-IMAGE:url(../images/bg_face.jpg); 
Z-INDEX: 2; 
POSITION: fixed; 
WIDTH: 205px; 
BOTTOM: 0px; 
BACKGROUND-REPEAT: no-repeat; 
BACKGROUND-POSITION: left bottom; 
HEIGHT: 594px; 
LEFT: 0px 
}

CSS에서 보다 큼 기호는 무엇을 의미하나요?

예: 여러 개의 스팬 태그를 포함하는 p 레이어가 있는데 코드는 다음과 같습니다.

<p> 
<span>亲人</span> 
<span>独家记忆</span> 
<span>离不开你</span> 
</p>

이 때 CSS를 사용하여 스타일을 정의하는 방법은 다음과 같아야 합니다.

p span { 
font:10px; 
color:blue; 
}

하지만 이때 하나의 스팬 태그는 다른 스타일을 표시해야 하지만 마지막 두 개의 태그의 스타일은 변경되지 않습니다. 첫 번째 범위를 p 태그에 넣어도 괜찮나요? 코드는 다음과 같습니다:

<p> 
<p> 
<span>亲人</span> 
</p> 
<span>独家记忆</span> 
<span>离不开你</span> 
</p>

불행히도 이것은 불가능합니다. 왜냐하면 p 스팬 {...} 스타일은 하위 태그이든 손자 태그이든 p 레이어 아래의 모든 스팬 태그에서 작동하기 때문입니다. 스타일은 여전히 ​​​​작동합니다. 이때 CSS의 "보다 큼" 기호를 사용합니다.

이제 이 스타일을 변경해 보겠습니다.

p > span { 
font:10px; 
color:blue; 
}

이렇게 하면 첫 번째 스팬 태그가 나머지 두 태그와 다른 스타일로 표시될 수 있습니다. 따라서 CSS에서 "보다 큼 기호"의 기능은 다음과 같습니다. 중첩된 태그에서 스타일은 손자 세대의 태그가 아닌 아들 세대의 태그에만 적용됩니다.

하지만 여전히 그런 상황이 있습니다. 다음 코드는

<p> 
<span>亲人 
<span>丁当</span> 
</span> 
<span>独家记忆</span> 
<span>离不开你</span> 
</p>

이때에도 "보다 큼" 기호가 작동할까요? 대답은: 아니오입니다. 왜냐하면 이 손자의 스팬 태그가 아들의 스팬 태그 스타일을 상속받기 때문입니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장사항:

CSS의 상속 사용 분석

CSS 스타일의 규칙 재정의

위 내용은 CSS 스타일의 초과 기호 사용 및 CSS의 상속 방법 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!