一、伪类和伪元素的介绍1.规范说明CSS引入了伪元素和伪类的概念，允许根据需要格式化的信息进行格式化位于文档树之外。2.直译理解CSS引入伪类和伪元素的概念是为了格式化文档树之外的信息。即伪类和伪元素用于修饰不在文档树中的部分，例如句子的第一个字母，或列表的第一个元素。二、伪类的概念1、规范说明伪类用于在现有元素处于某种状态时为其添加相应的样式，这种状态会根据用户的行为动态变化。2.例如，当用户悬停在指定元素上时，我们可以使用:hover来描述这个元素的状态。虽然它类似于普通的CSS类，可以为已有的元素添加样式，但它只能为处于DOM树无法描述的状态的元素添加样式，因此被称为伪类。三、伪元素的概念1、规范解释伪元素用来创建一些不在文档树中的元素，并为其添加样式。2.例如，我们可以使用:before在元素之前添加一些文本，并为这些文本添加样式。虽然用户可以看到文本，但文本实际上并不在文档树中。四、伪类枚举1、状态伪类状态伪类是根据元素的当前状态来选择的。元素的状态在与用户交互过程中是动态变化的，因此元素会根据其状态呈现不同的样式。当元素处于一种状态时样式存在，而当它进入另一种状态时样式丢失。选择器示例示例说明：linka:link选择所有未访问过的链接：visiteda:visited选择所有访问过的链接：hovera:hover将鼠标放在链接的状态上：activea:active选择活动链接：focusinput:focus选择一个元素Focusafterinput2.Structuralpseudo-classStructuralpseudo-class是CSS3中的一个新的选择器。它使用DOM树来过滤元素，并通过文档结构之间的关系来匹配元素。可以减少class和id属性的定义，使文档结构更加简洁。选择器示例示例描述：first-childp:first-child选择p元素的第一个子元素：first-of-typep:first-of-type选择每个父元素的第一个p子元素，即p元素：last-childp：last-child选择所有p元素的最后一个子元素：last-of-typep:last-of-type选择每个p元素作为其父元素的最后一个p元素：not(selector):not(p)选择所有其他元素thanp:nth-child(n)p:nth-child(2)选择所有p元素的第二个子元素：nth-last-child(n)p:nth-last-child(2)从中选择第二个子元素thebottomofallpelements:nth-last-of-type(n)p:nth-last-of-type(2)从所有p元素的底部选择第二个子元素即p:nth-of-type(n)p:nth-of-type(2)选择第二个子元素为p的所有p元素：only-of-typep:only-of-typeselectallonlyonechildelementisptheelement:only-childp:only-child选择所有只有一个子元素的p元素：target#news：target选择当前激活的#news元素（点击URL包含锚点名称）3.表单相关选择器示例示例说明：disabledinput:disabledselects所有禁用的表单元素：enabledinput:enabled选择没有设置disabled属性的表单元素：in-rangeinput:in-range选择指定区域内的元素：out-of-rangeinput:out-of-range选择not中的元素指定区域：validinput:validselectionconditionvalidationcorrectformelement:invalidinput:invalidselectionconditionvalidationerrorformelement:requiredinput:required选择设置了required属性的form元素：optionalinput:optionalselectnorequiredattribute，即设置optionalAttributesofformelements:read-onlyinput:read-onlyselect设置了readonly只读属性的元素：read-writeinput:read-write选择处于编辑状态的元素要素；input、textarea和contenteditableHTML元素在获得焦点时处于编辑状态：checkedinput:checked匹配选中的input元素，input元素包括radio和checkbox:emptyp:empty匹配所有没有子元素的p元素：default匹配的默认选择的元素（提交按钮始终是表单的默认按钮）。:indeterminate当组中的单选按钮或复选框未被选中时，:indeterminate匹配组中的所有单选按钮或复选框。:scope匹配样式范围下的元素。当样式没有设置scope属性时，样式中的样式将对整个html生效。（实验阶段）4.语言相关选择器功能说明：lang(language)匹配具有特定语言集的元素。可以通过在HTML元素上设置lang=""属性、在meta元素上设置charset=""属性或在http标头上设置语言属性来设置特定语言。其实，lang=""属性不仅可以在html标签上设置，也可以在其他元素上设置。:dir匹配指定阅读方向的元素。只有在HTML元素上设置了dir属性时，这个伪类才有效。目前支持两种阅读方向：ltr（从左到右）和rtl（从右到左）。目前，只有Firefox支持:dir伪类，在Firefox中使用时需要加上前缀（-moz-dir()）（实验性）。5.其他选择器功能说明：root匹配文档的根元素。一般html文件的根元素是html元素。:fullscreen匹配处于全屏模式的元素。全屏模式不是通过按F11打开的，而是通过Javascript的FullscreenAPI打开的，不同的浏览器有不同的FullscreenAPI。目前，:fullscreen需要加上前缀才能工作。五、伪元素列表1、单双冒号选择器功能说明::before/:before在被选元素前插入内容。content属性需要用来指定要插入的内容。插入的内容实际上并不在文档树中。::after/:after在被选元素之后插入内容。它的用法和特点类似于:before。::first-letter/:first-letter匹配元素中文本的第一个字母。修饰的首字母不在文档树中。::first-line/:first-line匹配元素中第一行的文本。这个伪元素只能用在块元素中，不能用在行内元素中。2.只有双冒号选择器description::selection匹配用户选中或高亮显示的部分。使用Firefox浏览器时，需要添加-moz前缀。::placeholder匹配占位符的文本。此伪元素仅在元素设置了占位符属性时才有效。这个伪元素不是CSS标准，它的实现在未来可能会改变，所以使用它的决定必须谨慎。在某些浏览器（IE10和Firefox18及以下）中，使用单冒号形式。::backdrop用于在全屏模式下更改背景颜色。全屏模式的默认颜色是黑色。（实验阶段）阅读更多：WEBING参考文章：AlloyTeam
