1.子元素选择器>，用来选中某个元素的第一级子元素，也就是儿子元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 子代选择器,只对儿子元素有效 */ p>strong { color: red; } </style> </head> <body> <p>这是p标签，<strong>表示一个段落</strong></p> <p>这是p标签，嵌套了<i>b标签和<strong>i标签</strong></p> </body> </html>
2.兄弟选择器+，两个元素有同一个父元素，只对邻近的第一个元素起作用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 兄弟选择器,只对相邻的一个元素起作用 */ h3+p{ color: #008000; font-size: 18px; font-family: "楷体"; } </style> </head> <body> <h3>望庐山瀑布</h3> <p>日照香炉生紫烟，遥看瀑布挂前川。</p> <p>飞流直下三千尺，疑是银河落九天。</p> </body> </html>
3.普通兄弟选择器~，多个元素具有同一个父元素，不必邻近。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 普通兄弟选择器,对所有相邻的元素都起作用，不用紧跟第一个元素 */ h3~p{ color: red; } </style> </head> <body> <h3>望庐山瀑布</h3> <h5>作者：李白</h5> <p>日照香炉生紫烟，遥看瀑布挂前川。</p> <p>飞流直下三千尺，疑是银河落九天。</p> </body> </html>