最近用js实现了一些css效果。发现很多效果其实是可以用伪类或者伪元素来实现的。专门补充一下这方面的知识。记录为什么要引入伪类和伪元素CSS引入了伪元素和伪类的概念以允许基于文档树之外的信息进行格式化。css引入了伪类和伪元素的概念以文档树信息之外的格式，即。伪类和伪元素用于修饰不在文档树中的部分，例如句子的第一个字母，或列表的第一个元素。伪类用于在现有元素处于某种状态时为其添加相应的样式。此状态根据用户行为动态变化。例如，当用户悬停在指定元素上时，我们可以使用：hover来描述这个元素的状态。虽然它和普通的css类类似，可以给已有的元素添加样式，但是它只能在dom树无法描述的状态下给元素添加样式，所以称为伪类。伪元素用户创建一些不在文档树中的元素，并为其添加样式。例如，我们可以通过以下方式在元素前添加一些文本：before,pseudo-classpseudo-class-status:link选择未访问过的链接：visited选择访问过的链接：hover选择鼠标指针悬停的元素：active选择活动链接：focus选择获得焦点的输入域元素：first-child匹配元素的第一个子元素：last-child匹配元素的最后一个子元素：first-of-type表示其类型在a中的第一个元素groupofsiblingelements:last-of-type表示其类型在一组兄弟元素中的最后一个元素：nth-??child根据元素的位置匹配一个或多个元素，它接受一个+形式的参数b0n+3或简单的3匹配第三个元素2n+1匹配位置1,3,5,7...的元素可以用奇数替换奇数行，偶数替换偶数行：nth-last-child类似于：nth-child除了它是从最后一个子元素开始计数：nth-??of-type类似于nth-child，只是它只匹配特定类型的元素：nth-last-type类似于nth-of-type，只是它是从最后一个Child元素开始计数。:only-child:only-child当元素是其父元素的唯一子元素时匹配该元素:only-of-type:only-child当元素是其父元素中特定类型的唯一子元素时匹配该元素：目标当url有target名称并指向文档中的特定元素时：target匹配元素的伪类-form相关：checked匹配选中的input元素，包裹radio和checkbox.:default匹配选中的元素默认：disabled匹配禁用的表单元素：empty匹配没有子元素的元素，如果元素包含文本节点、html元素或空格，则：empty不能匹配此元素：enabled匹配没有设置disabled属性的表单元素：in-range匹配指定范围内的元素，:out-of-range匹配不在指定范围内的元素:indetermimate当组中的单选按钮或复选框未被选中时，:indeterminate匹配组中的所有单选按钮或checkboxes:valid匹配条件Validatecorrectformelements:invalid匹配提交验证错误的formelements:optional:required匹配formelementswithorwithoutsettherequiredattribute:read-onlymatchsetread-onlyAttributedelements:read-writematcheselements处于编辑状态的伪类-Others:root匹配文档的后跟元素:fullscreen匹配处于全屏模式的元素伪元素有时你会发现伪元素使用两个冒号(::)而不是冒号(:)。这是CSS3的一部分，试图区分伪类和伪元素。大多数浏览器都支持这两个值。1::before/:before要在被选元素之前插入内容，需要使用content属性指定要插入的内容。插入的内容实际上不在文档树中2::after/:after在元素之后插入内容。它的用法和特点类似于:before3::first-letter/:first-letter匹配元素中文本的第一个字母4::first-line/:first-line匹配元素中第一行的文本元素，这个伪元素只能用在快速元素中。它不能内联使用。5::selection匹配用户选择的部分或处于高亮状态。该元素仅支持双冒号形式。元素生效。全文cx痕迹非常严重。详细文章请看http://www.alloyteam.com/2016...
