<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- 后代 ul li{} 寻找父级元素下面的的元素(如:li,寻找父元素下面li标签) 父子 ul > li{} 寻找父级元素(如:ul,寻找子元素上面的ul标签) 兄弟 div ~ ul{} 向下寻找,不会向上寻找 相邻 div + ul{} 紧挨着下一个的标签 --> <style> /* 后代 */ /* ul li{ 200px; height: 200px; background-color: #0000FF; color: #0000FF; } */ /* 父级 */ /* ol >li{ 200px; height: 200px; background-color: #0000FF; color: #0000FF; } */ /* 兄弟 */ /* div ~ ul{ color: #0000FF; } */ /* 相邻 */ div+ul{ color: #0000FF; } div </style> </head> <body> <div id="div1">1</div> <ul> <li>1</li> </ul> <ol> <li>2</li> </ol> </body> </html>