CSS 컨텍스트 선택기에는 네 가지 유형이 있습니다. 1. 현재 요소의 모든 하위 요소를 선택할 수 있는 하위 선택기 2. 현재 요소의 모든 하위 요소를 선택할 수 있는 부모-자식 선택기 3. 형제 인접 선택기 , 공통 상위가 있고 인접한 요소를 선택할 수 있습니다. 4. 동일한 수준의 모든 선택기는 공통 상위가 있는 모든 후속 요소를 선택할 수 있습니다. 이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터. Css 컨텍스트 선택기 컨텍스트 선택기는 "부모-자식" 또는 계층적 관계를 형성하는 요소 그룹이며, 스타일은 해당 관계를 통해 설정됩니다. html 문서는 " "트리"이므로 계층 구조를 갖습니다 각 요소는 문서 내에서 고유한 위치, 즉 컨텍스트를 갖습니다 그래서 요소의 컨텍스트를 기반으로 가져올 수 있습니다 한 요소의 네 가지 역할 일련번호 Role Description 1 조위 요소 에는 하위 요소, 손자 요소 등 모든 수준의 하위 요소가 있습니다 2 상위 요소하위 요소 수준의 요소만 3하위 요소다른 수준 요소와 공통 조상 요소를 갖습니다. 4하위 요소다른 수준 요소와 수준 요소는 공통 상위 요소 함께 4개의 상황별 선택기 일련 번호selectoroperatordescriptionexample 1descendants 선택자 space空格 选择当前元素的所有后代元素 div p, body * 2 父子选择器 > 选择当前元素的所有子元素 div > h2 3 同级相邻选择器 + 选择拥有共同父级且相邻的元素 li.red + li 4 同级所有选择器 ~ 选择拥有共同父级的后续所有元素 li.red ~ li현재 요소의 모든 하위 요소를 선택합니다 div p, body * 2부모 및 아들 선택기 > 현재 요소의 모든 하위 요소를 선택합니다div > +🎜공통 상위 요소가 있는 인접 요소 선택🎜🎜li .red + li🎜🎜🎜🎜4🎜🎜동일한 수준의 모든 선택기🎜🎜~🎜🎜공통 상위 요소가 있는 모든 후속 요소 선택🎜🎜li.red ~ li🎜🎜🎜🎜🎜🎜Example🎜🎜🎜🎜🎜 上下文选择器 .container { width: 300px; height: 300px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; } /* 类选择器 */ .item { font-size: 2rem; background-color: lightskyblue; display: flex; justify-content: center; align-items: center; } /* 后代选择器 */ .container div { border: 1px solid coral; } /* 父子选择器,只有外层的div受影响 */ body > div { border: 3px solid green; } /* 使用后代选择器模拟父子选择器 */ /* body div.container { border: 3px solid green; } */ /* 同级相邻选择器 */ /* 选择与第5个相邻的,即后面的"一个"元素 */ /* .item.center + .item { background-color: lightgreen; } */ /* 同级所有选择器 */ /* 选择与第5个后面的,有共同父级的所有兄弟元素 */ .item.center ~ .item { background-color: lightgreen; } 1 2 3 4 5 6 7 8 9 🎜 (학습 영상 공유: 🎜css 영상 튜토리얼🎜)🎜
