css3 관계 선택기에는 4가지 유형이 있습니다. 1. 포함 선택기 "E F"는 E 요소에 포함된 모든 F 요소를 선택합니다. 2. 하위 선택기 "E>F"는 E 요소 F의 모든 직접 하위 요소를 선택합니다. 3. 인접 선택기 "E+F"는 E 요소 바로 다음에 있는 F 요소를 선택합니다. 4. 형제 선택기 "E~F". 이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터. CSS3의 관계 선택자는 주로 포함 선택자, 하위 선택자, 인접 선택자 및 형제 선택자를 포함합니다. 포함 선택자는 기호 공백으로 연결됩니다. 자식 선택자는 "> 기호로 연결됩니다. ;">”连接 相邻选择器由符号“+”连接 兄弟选择器由符号“～ 인접 선택자는 "+" 기호로 연결됩니다 동위 선택자는 "~ " 기호로 연결됩니다. 아래에서 자세히 설명드리겠습니다. 선택기 포함(E F) E 요소에 포함되고 공백으로 구분된 모든 F 요소를 선택합니다ul li{color:green;} 宝马 奔驰 奥迪 CSS3 하위 선택기(E>F)Children selector main 첫 번째 수준 하위를 선택하는 데 사용됩니다. 요소의 요소. 예를 들어, h1 요소의 하위 요소인 Strong 요소를 선택하려면 다음과 같이 쓸 수 있습니다. h1> 다음은 그림과 같이 하위 선택기(>)의 사용법을 보여주는 사례를 사용합니다. nbsp;html> CSS3子代选择器用法 h1 > strong { color: red; font-size: 20px; font-family: "微软雅黑"; } 这个知识点很重要 PHP中文网欢迎你！ 위 코드에서 15번째 코드 줄의 Strong 요소는 h1의 하위 요소입니다. 요소 및 16번째 줄 코드 줄의 Strong 요소는 h1 요소의 손자이므로 코드에 설정된 스타일은 코드의 15번째 줄에만 유효합니다. CSS3 형제 선택기(E+F)이 선택기는 더하기 기호 "+"를 사용하여 두 선택기 전후를 연결합니다. 선택기의 두 요소는 동일한 상위 요소를 가지며 두 번째 요소는 첫 번째 요소 바로 뒤에 있어야 합니다. 다음은 인접 형제 선택자의 사용법을 보여주기 위해 사례를 사용합니다. nbsp;html> CSS3紧邻兄弟选择器用法 p + h2{ color: green; font-family: "宋体"; font-size: 20px; } 《赠汪伦》 李白乘舟将欲行， 忽闻岸上踏歌声。 桃花潭水深千尺， 不及汪伦送我情。 위 코드에서 7~11행은 p 요소 바로 뒤의 첫 번째 형제 요소 h2의 스타일을 정의하는 데 사용됩니다. p 요소 바로 뒤의 첫 번째 형제 요소의 위치가 코드의 17번째 줄이므로 코드의 17번째 줄의 텍스트 내용이 정의된 스타일로 표시되는 구조를 보면 알 수 있습니다. 그림에서 볼 수 있듯이 p 요소 바로 다음의 h2 요소만 코드에서 설정한 스타일이 적용되어 있습니다. CSS3 인접 선택자(E~F)일반적인 형제 선택자는 "~"를 사용하여 두 선택자를 앞뒤로 연결합니다. 지정된 요소 뒤에 있는 모든 형제 노드를 찾습니다. 다음은 아래와 같이 일반적인 형제 선택자의 사용법을 보여주기 위해 사례를 사용합니다. CSS3普通兄弟选择器~用法 p ~ h2{ color: pink; font-family: "微软雅黑"; font-size: 20px; } 《赠汪伦》 李白乘舟将欲行， 忽闻岸上踏歌声。 桃花潭水深千尺， 不及汪伦送我情。 🎜🎜🎜그림에서 볼 수 있듯이 p 요소 뒤의 모든 형제 요소 h2에는 코드에 설정된 스타일이 적용되어 있습니다. 🎜🎜(학습 영상 공유: 🎜css 영상 튜토리얼🎜)🎜
