이전 글 "CSS의 기본 선택자에 대해 자세히 설명하고 선택자 우선순위에 대해 이야기해요"에서는 CSS의 기본 선택자에 대해 알아보았습니다. 이번 글에서는 계층적 선택자에 대해 이야기해 보도록 하겠습니다. 모두 도와주세요! 레벨 선택기 CSS레벨 선택기는 HTML 노드 트리 간의 관계를 기반으로 제공되는 선택기 사용법이므로 레벨 선택기를 잘 배우고 싶다면 먼저 HMTL 요소 간의 관계를 이해해야 합니다. 처럼 보입니다. [추천 학습: css 동영상 튜토리얼] 먼저 다음 HTML 코드를 살펴보세요. nbsp;html> HTML测试代码 위 코드는 아래 그림과 같이 다음 노드 트리로 그릴 수 있습니다. 이제 살펴보겠습니다. HTML 요소 HTML 페이지의 요소 간 관계에는 아래와 같이 세 가지 관계가 있습니다. 부모와 자식 간의 관계: 위 코드에서 왼쪽 요소는 요소의 상위 요소이고, 반대로 는 하위 요소의 입니다. 물론 이러한 부모-자식 구조가 더 많이 있습니다. 元素是元素的的父级元素，反之是 的子级元素，当然这种父子结构还有跟多。兄弟之间的关系 ：在上述代码代码中，元素和元素是兄弟元素，元素和 元素也是兄弟元素。 祖先与后代之间的关系 ：在上述代码代码中，元素是元素的后代元素，反之元素是元素的祖先元素。 层级选择器种类 根据HTML元素之间的3种关系，CSS的层级选择器提供了如下4种用法： 后代选择器：将某个元素当做祖先元素，定位该元素的所有后代元素。 子级选择器：将某个元素当做父级元素，定位该元素的所有子级元素。 相邻兄弟选择器：将某个元素作为目标元素，定位与该目标元素拥有同一个父级元素的下一个指定元素 普通兄弟选择器：是将某个元素作为目标元素，定位与该目标元素拥有同一个父级元素的之后任意指定元素。 选择符 CSS提供的4个选择符，对应着CSS层级选择题的四种用法，如下所示 表示后代关系的空格（ ） 表示父子关系的尖括号（>） 表示相邻兄弟关系的加号（+） 表示兄弟关系的波浪号（~ 형제의 관계: 위 코드에서 요소와 요소는 형제 요소이며, 는 요소와 요소도 형제 요소입니다. 조상과 후손의 관계: 위 코드에서 요소는 요소의 하위 요소이며, 그 반대도 마찬가지입니다. 요소는 요소의 조상입니다. 계층적 선택기 유형 HTML 요소 간의 세 가지 관계에 따라 CSS 계층적 선택기는 다음 4가지 용도를 제공합니다. 하위 선택기: 요소를 상위 요소로 취급하고 이 요소의 모든 하위 요소를 찾습니다. 하위 선택기: 요소를 상위 요소로 취급하고 이 요소의 모든 하위 요소를 찾습니다. 인접 형제 선택자: 특정 요소를 대상 요소로 사용하고 대상 요소와 동일한 상위 요소를 가진 다음 지정된 요소를 찾습니다. 일반 형제 선택자: 특정 요소를 대상 요소로 사용하여 위치 지정 대상 요소와 동일한 상위 요소가 있는 지정된 요소입니다. 선택기 CSS에서 제공하는 4개의 선택기는 아래와 같이 CSS 수준 객관식 질문의 4가지 용도에 해당합니다. 후손 관계를 나타내는 공백( )은 을 나타냅니다. 부모-자식 관계 꺾쇠 괄호(>) 🎜🎜 인접한 형제 관계를 나타내는 더하기 기호(+) 🎜🎜🎜🎜 형제 관계를 나타내는 물결표 ( ~) 🎜🎜🎜🎜웹 개발에서는 처음 두 가지가 더 일반적으로 사용됩니다 - 🎜descendant selector🎜 및 🎜child selector🎜. 🎜🎜먼저 코드를 살펴보겠습니다. 🎜 使用CSS3层次选择器 * {margin:0;padding:0;} body {width: 300px; margin:0 auto;} div{margin:5px;padding:5px;border:1px solid #ccc;} 1 2 3 4 5 6 7 8 9 10 🎜🎜🎜🎜🎜하위 항목 선택기🎜🎜🎜는 특정 요소의 모든 하위 요소를 선택하는 데 사용됩니다. 예를 들어 위 HTML에서 다음 스타일을 사용하면 어떤 효과가 있나요? 🎜body div { background-color: yellow; }🎜여기서는 body 요소의 하위 div 요소의 배경색을 노란색으로 설정했습니다. 즉, 모든 div가 노란색으로 염색됩니다. 🎜🎜🎜🎜🎜🎜하위 선택기🎜🎜🎜는 특정 요소(여러 요소 가능) 아래의 모든 첫 번째 수준 하위 요소를 선택하는 데 사용됩니다. 예를 들어, 다음 선택기와 스타일을 사용하면 어떤 효과가 있을까요? 🎜body > div { background-color: red; }🎜이렇게 설정한 후 본문 아래 1단계 div 요소, 여기 콘텐츠 1, 2, 3, 4, 7이 포함된 div 요소를 설정하고 배경색을 빨간색으로 설정합니다. 🎜🎜🎜🎜🎜🎜인접 형제 선택기🎜🎜🎜는 요소(또는 일부 요소)의 형제 디렉터리에서 다음 요소를 선택하는 데 사용됩니다. 예를 들어, 여기에서 다음 스타일 설정을 사용한 후 효과는 어떤 모습일까요? 🎜.active + div { background-color: green; }🎜여기서는 두 번째 div 요소인 .active 선택기의 인접한 형제 노드를 설정하고 배경색을 녹색으로 설정합니다. 🎜🎜🎜🎜🎜🎜범용 형제 선택기🎜🎜🎜는 특정(또는 일부) 요소의 형제 디렉터리에 있는 다음 태그를 모두 선택하는 데 사용됩니다. 인접한 형제 선택자와 유사하며 동일한 상위 요소에 있어야 합니다. 🎜比如使用下面的代码，影响到的样式：.active ~ div { background-color: pink; }这里将类名为"active"的元素（这里为第一个div）的通用兄弟（这里是内容为2、3、4、7的div）设置了背景色为粉红色。 （学习视频分享：web前端入门）
