本教程操作环境：windows7系统、css3&&html5版、dell g3电脑。
css3中的关系选择器主要包括包含选择器、子代选择器、相邻选择器和兄弟选择器：
包含选择器由符号空格“ ”连接
子代选择器由符号“>”连接
相邻选择器由符号“+”连接
兄弟选择器由符号“～”连接
下面我们将详细讲解一下。
包含选择器（e f）选择所有被e元素包含的f元素，中间用空格隔开
ul li{color:green;}<ul> <li>宝马</li> <li>奔驰</li></ul><ol> <li>奥迪</li></ol>
css3子代选择器(e>f)子代选择器主要用来选择某个元素的第一级子元素。例如希望选择只作为h1元素子元素的strong元素，可以这样写：h1> strong。
下面通过一个案例对子代选择器(>)的用法进行演示，如图所示：
<!doctype html><html><head> <meta charset="utf-8"> <title>css3子代选择器用法</title> <style> h1 > strong { color: red; font-size: 20px; font-family: "微软雅黑"; } </style></head><body> <h1>这个<strong>知识点</strong>很<strong>重要</strong></h1> <h1>php<em><strong>中文网</strong></em>欢迎你！</h1></body></html>
在上述代码中，第15行代码中的strong元素为h1元素的子元素，第16行代码中的strong元素为h1元素的孙元素，因此代码中设置的样式只对第15行代码有效。
css3兄弟选择器(e+f)该选择器使用加号“+”来链接前后两个选择器。选择器中的两个元素有同一个父亲，而且第二个元素必须紧跟第一个元素。
下面通过一个案例对临近兄弟选择器的用法进行演示。
<!doctype html><html><head> <meta charset="utf-8"> <title>css3紧邻兄弟选择器用法</title> <style type="text/css"> p + h2{ color: green; font-family: "宋体"; font-size: 20px; } </style></head><body> <body> <h2>《赠汪伦》</h2> <p>李白乘舟将欲行，</p> <h2>忽闻岸上踏歌声。</h2> <p>桃花潭水深千尺，</p> <h2>不及汪伦送我情。</h2></body>
在上述代码中，第7～11行代码用于为p元素后紧邻的第一个兄弟元素h2定义样式。从结构中看出p元素后紧邻的第一个兄弟元素所在位置为第17行代码，因此第17行代码的文字内容将以所定义好的样式显示。
从图中可以看出，只有紧跟p元素的h2元素应用了代码中设定的样式。
css3相邻选择器(e~f)普通兄弟选择器使用“～”来链接前后两个选择器。查找某一个指定元素的后面的所有兄弟结点。
下面通过一个案例对普通兄弟选择器的用法进行演示，如下所示。
<!doctype html><html><head> <meta charset="utf-8"> <title>css3普通兄弟选择器~用法</title> <style type="text/css"> p ~ h2{ color: pink; font-family: "微软雅黑"; font-size: 20px; } </style></head><body> <body> <h2>《赠汪伦》</h2> <p>李白乘舟将欲行，</p> <h2>忽闻岸上踏歌声。</h2> <h2>桃花潭水深千尺，</h2> <h2>不及汪伦送我情。</h2></body></html>
从图中可以看出，p元素后面的所有兄弟元素h2都应用了代码中所设定的样式。
（学习视频分享：css视频教程）
以上就是css3关系选择器有哪几种的详细内容。