你了解css3伪类和伪元素吗？

元素（例如工具提示）p{display:none;背景色：黄色；填充：20px；}div:hoverp{显示：块；}:first-child伪类：first-child伪类指定的元素是另一个元素的第一个子匹配。在下面的示例中，选择器匹配任何

元素的第一个子元素：p:first-child{color:blue;}匹配所有

元素中的第一个元素pi:first-child{color:blue;}匹配第一个子

元素中的所有元素p:first-childi{color:blue;}:lang伪类：lang伪类允许为不同的语言定义特殊规则。在以下示例中，:lang使用lang="no"为元素定义引号：q:lang(no){quotes:"~""~";}所有CSS伪类选择器示例描述:activea:activeselectactiveactivatelink:checkedinput:checked选择每个选中的元素:disabledinput:disabled选择每个禁用的元素:emptyp:empty选择每个

没有子元素的元素：启用input：enabled选择每个启用的元素：first-childp:first-child选择作为其父元素的第一个子元素的每个

元素：first-of-typep:first-of-type选择作为其父元素的第一个

元素的每个

元素：focusinput：focus选择具有焦点的元素：hovera：悬停在鼠标悬停时选择链接：in-rangeinput：in-range选择值在指定范围内的元素：invalidinput:invalid选择所有值无效的元素：lang(language)p:lang(it)选择每个lang属性值以开头的元素"it"

elements:last-childp:last-child选择作为其父元素的最后一个子元素的每个

元素：last-of-typep:last-of-type选择每个

元素是其父元素的最后一个

元素：linka:link选择所有未访问的链接：not(selector):not(p)选择不是

元素的每个元素：nth-??child(n)p:nth-child(2)选择每个

元素作为其父元素的第二个子元素：nth-??last-child(n)p:nth-last-child(2)选择每个

元素作为其父元素的第二个子元素父元素，从最后一个子元素算起：nth-??last-of-type(n)p:nth-last-of-type(2)选择每个

元素作为其父元素的第二个

元素，从最后一个子元素开始计算：nth-??of-type(n)p:nth-of-type(2)选择每个

作为其父元素的第二个

元素的元素：only-of-typep：only-of-type选择每个

元素，该元素是其父元素p>的唯一

元素：only-childp:only-child选择作为其父元素唯一子元素的每个

元素：可选输入：可选选择一个没有“必需”属性的元素：超出范围输入：超出范围-range选择值在指定范围外的元素：read-onlyinput：只读选择具有指定“readonly”属性的元素：read-writeinput：读写选择不带“readonly”属性元素：requiredinput:required选择指定“required”属性的元素：rootroot选择文档的根元素：target#news:target选择当前活动的#news元素（单击包含锚名称):validinput:valid选择所有具有有效值的元素:visiteda:visited选择所有访问过的链接所有CSS伪元素选择器示例描述::afterp::after在每个

元素之后插入内容：:before::before在每个

之前插入内容element::first-letterp::first-letter选择每个

元素的首字母::first-linep::first-line选择每个的第一行

element::selectionp::selection选择用户选择的元素部分