> 웹 프론트엔드 > CSS 튜토리얼 > CSS 부모-자식 사용 방법

CSS 부모-자식 사용 방법

php中世界最好的语言
풀어 주다: 2017-12-01 14:51:58
원래의
4746명이 탐색했습니다.

프론트엔드 프로젝트를 진행할 때 요소 모듈 간의 상위 관계를 명확히 해야 요소를 보다 편리하게 유지 관리하고 찾고 사용할 수 있습니다. 오늘은 좋은 소개를 해보겠습니다.

간단히 CSS 부모에 대해 이야기하면 CSS 자식은 상대적입니다. 예를 들어 DIV "A"는 다른 DIV "B"로 래핑되므로 같은 이유로 B가 A의 부모라고 생각할 수 있습니다.

부모-자식 또는 때로는 DIV 중첩 관계를 아버지-아들 관계에 비유합니다. 이는 이해를 돕기 위해 DIV 중첩 관계를 부모-자식 관계에 비유합니다.

, 예시:

DIV CSS 상위-하위 설명 예시:

CSS code

.yangshi{...} 
.yangshi .yangshi_a{ ...} 
.yangshi .yangshi_b{ ...}
로그인 후 복사

Div code

<div class="yangshi"> 
<div class="yangshi_a">内容a</div> 
<div class="yangshi_b">内容b</div> 
</div>
로그인 후 복사

여기 위 div+css 코드에서 yangshi_a의 상위(상위)가 yangshi라고 생각하면 됩니다. .

이 방법으로 CSS 포인터 properties를 사용할 수 있습니다. div CSS에서 최종 CSS 스타일은 동일한 이름의 속성 선택기를 가질 수 있지만 다른 값이 할당됩니다.

이렇게 .yangshi .yangshi_a


를 통해 yangshi_a의 부모가 yangshi라는 것을 한눈에 알 수 있습니다. 이 사례들을 읽으신 후에는 방법을 익히셨으리라 생각합니다. 더 흥미로운 내용을 보려면 주목해 주세요. php 중국어 홈페이지기타관련 기사!

관련 읽기:

Css3에서 변환 그라데이션 속성을 사용하는 방법

Css3 단계를 통해 동적 스위치 효과 만들기

CSS3을 사용하여 HTML5 양식을 최적화하는 단계

위 내용은 CSS 부모-자식 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿