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) 子代选择器主要用来选择某个元素的第一级子元素。例如希望选择只作为h1元素子元素的strong元素，可以这样写：h1> strong。 下面通过一个案例对子代选择器(>)的用法进行演示，如图所示： 76c82f278ac045591c9159d381de2c57 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7CSS3子代选择器用法6e916e0f7d1e588d4f442bf645aedb2f c9ccee2e6ea535a969eb3f532ad9fe89 h1 > strong { color: red; font-size: 20px; font-family: "微软雅黑"; } 531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 4a249f0d628e2318394fd9b75b4636b1这个8e99a69fbe029cd4e2b854e244eab143知识点128dba7a3a77be0113eb0bea6ea0a5d0很8e99a69fbe029cd4e2b854e244eab143重要128dba7a3a77be0113eb0bea6ea0a5d0473f0a7621bec819994bb5020d29372a 4a249f0d628e2318394fd9b75b4636b1PHP907fae80ddef53131f3292ee4f81644b8e99a69fbe029cd4e2b854e244eab143中文网128dba7a3a77be0113eb0bea6ea0a5d0d1c6776b927dc33c5d9114750b586338欢迎你！473f0a7621bec819994bb5020d29372a 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e 在上述代码中，第15行代码中的strong元素为h1元素的子元素，第16行代码中的strong元素为h1元素的孙元素，因此代码中设置的样式只对第15行代码有效。 CSS3兄弟选择器(E+F) 该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。 下面通过一个案例对临近兄弟选择器的用法进行演示。 76c82f278ac045591c9159d381de2c57 100db36a723c770d327fc0aef2ce13b1 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7CSS3紧邻兄弟选择器用法6e916e0f7d1e588d4f442bf645aedb2f 46d5fe1c7617e3914f214aaf043f4ccf p + h2{ color: green; font-family: "宋体"; font-size: 20px; } 531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d 6c04bd5ca3fcae76e30b72ad730ca86d c1a436a314ed609750bd7c7d319db4da《赠汪伦》2e9b454fa8428549ca2e64dfac4625cd e388a4556c0f65e1904146cc1a846bee李白乘舟将欲行，94b3e26ee717c64999d7867364b1b4a3 c1a436a314ed609750bd7c7d319db4da忽闻岸上踏歌声。2e9b454fa8428549ca2e64dfac4625cd e388a4556c0f65e1904146cc1a846bee桃花潭水深千尺，94b3e26ee717c64999d7867364b1b4a3 c1a436a314ed609750bd7c7d319db4da不及汪伦送我情。2e9b454fa8428549ca2e64dfac4625cd 36cc49f0c466276486e50c850b7e4956 在上述代码中，第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视频教程）
