<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /* * 为第一个p标签设置一个背景颜色为黄色 * :first-child 可以选中第一个子元素 * :last-child 可以选中最后一个子元素 */ /*body > p:first-child{ background-color: yellow; }*/ /*p:last-child{ background-color: yellow; }*/ /* * :nth-child 可以选中任意位置的子元素 * 该选择器后边可以指定一个参数，指定要选中第几个子元素 * even 表示偶数位置的子元素 * odd 表示奇数位置的子元素 * */ /*p:nth-child(odd){ background-color: yellow; }*/ /* * :first-of-type * :last-of-type * :nth-of-type * 和:first-child这些非常的类似， * 只不过child，是在所有的子元素中排列 * 而type，是在当前类型的子元素中排列 */ /*p:first-of-type{ background-color: yellow; }*/ p:last-of-type{ background-color: yellow; } </style> </head> <body> <span>我是span</span> <p>我是一个p标签</p> <p>我是一个p标签</p> <p>我是一个p标签</p> <p>我是一个p标签</p> <p>我是一个p标签</p> <p>我是一个p标签</p> <span>hello</span> <!--<div> <p>我是DIV中的p标签</p> </div>--> </body> </html>