两者都与选择器相关，添加一些“特殊”的效果

伪类

用于向某些选择器添加特殊的效果

1.通过选择器找到那些不存在与DOM树中的信息

例如：<a>标签的:link :visited等，这些信息不存在与DOM树结构中，只能通过CSS选择器来获取；

2.不能被常规CSS选择器获取的信息

例如伪类:target，它的作用是匹配文档(页面)的URI中某个标志符的目标元素，例如我们可以通过如下代码来实现页面内的区域跳转

image.png

CSS代码如下：

image.png
通过JS同样可以实现相似功能
例如：
image.png

上面的代码将所有偶数行背景色设置为#CCC，不能被5整除的奇数行设置背景色#FFF，能够被5整除的奇数行设置背景色#f0f
伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的;

image.png

一．状态

• link选择未访问的链接
• visited选择已访问的链接
• hover选择鼠标指针浮动在其上的元素
• active选择活动的链接
• focus选择获取焦点的输入字段结构化

二．结构化

• :not一个否定伪类，用于匹配不符合参数选择器的元素。
  如下例，除了第一个<li>元素外，其他<li>元素的文本都会变为橙色。

  
  CSS
  HTML
• first-child 匹配元素的第一个子元素。
• last-child匹配元素的最后一个子元素。
• first-of-type匹配属于其父元素的首个特定类型的子元素的每个元素。
  如下例，第一个<li>元素和第一个<span>元素的文本会变为橙色。
  CSS
  HTML
• last-of-type匹配元素的最后一个子元素。
• nth-child 根据元素的位置匹配一个或者多个元素
  它接受一个an+b形式的参数，an+b匹配到的元素示例如下：
  1n+0，或n，匹配每一个子元素。
  2n+0，或2n，匹配位置为2、4、6、8…的子元素，该表达式与关键字even等价。
  2n+1匹配位置为1、3、5、7…的子元素、该表达式与关键字odd等价。
  3n+4匹配位置为4、7、10、13…的子元素。
  示例

第二个元素变色
2的倍数的元素变色
第六个开始二的倍数变色

• nth-last-child 与:nth-child相似，它是从最后一个子元素开始计数的。
• nth-of-type :nth-of-type与nth-child相似，它是只匹配特定类型的元素。
  如下例，第二个<p>元素会变为橙色
  image.png
  image.png
• nth-last-type :nth-last-of-type与nth-of-type相似，它是从最后一个子元素开始计数

• only-child当元素是其父元素中唯一一个子元素时，:only-child匹配该元素。

  
  image.png
  image.png
• only-of-type当元素是其父元素中唯一特定类型的子元素时，:only-child匹配该元素。
  如下例，第一个ul元素只有一个li类型的元素，该li元素的文本会变为橙色。
  image.png
  image.png
• target当URL带有锚名称，指向文档内某个具体的元素时，:target匹配该元素。

如下例，url中的target命中id值为tar的article元素，article元素的背景会变为黄色。
URL: http://example.com/#target

image.png
image.png

三．表单相关

1 :checked
　　:checked匹配被选中的input元素(包括radio和checkbox)
　　如下例，当复选框被选中时，与其相邻的<label>元素的背景会变成黄色。

image.png
image.png
2 :default
　　:default匹配默认选中的元素，例如：提交按钮总是表单的默认按钮。
　　如下例，只有提交按钮的背景变成了黄色。
image.png
image.png
3 :disabled
　　:disabled匹配禁用的表单元素。
　　如下例，被禁用input输入框的透明度会变成50%。
image.png
image.png
4 :empty
:empty匹配没有子元素的元素。
如下例，:empty能匹配的元素会变为黄色。
　　第一个元素中有文本节点，所以其背景不会变成黄色；
　　第二个元素中有一个空格，有空格则该元素不为空，所以其背景不会变成黄色；
　　第三个元素中没有任何内容，所以其背景会变成黄色；
　　第四个元素中只有一个注释，此时该元素是空的，所以其背景会变成黄色；
image.png
image.png
　5 :enabled
　　:enabled匹配没有设置disabled属性的表单元素。
6 :in-range
　　:in-range匹配在指定区域内元素。
　如下例，当数字选择器的数字在5到10是，数字选择器的边框会设为绿色。
image.png
image.png

7 :out-of-range
　　:out-of-range与:in-range相反，它匹配不在指定区域内的元素。

8 :indeterminate
　　indeterminate当某组中的单选框或复选框还没有选取状态时，:indeterminate匹配该 组中所有的单选框或复选框。
9 :valid
　　:valid匹配条件验证正确的表单元素。
　　如下例，当email输入框内的值符合email格式时，输入框的边框会被设为绿色。

image.png
image.png
10 :invalid
　　:invalid与:valid相反，匹配条件验证错误的表单元素。

11 :optional
　　:optional匹配是具有optional属性的表单元素。当表单元素没有设置为required时，即为optional属性。
　　如下例，第一个input的背景不会被设为黄色，第二个input的背景会被设为黄色。

image.png
image.png
12 :required
　　:required与:optional相反匹配设置了required属性的表单元素。
13 :read-only
　　:read-only匹配设置了只读属性的元素，表单元素可以通过设置“readonly”属性来定义元素只读。
　如下例，input元素的背景会被设为黄色。
image.png
image.png
14 :read-write
　　:read-write匹配处于编辑状态的元素。input，textarea和设置了contenteditable的HTML元素获取焦点时即处于编辑状态。

15 :scope(处于试验阶段)
　　:scope匹配处于style作用域下的元素。当style没有设置scope属性时，style内的样式会对整个html起作用。

image.png

四．语言相关

1 :dir(处于实验阶段)
　　:dir匹配指定阅读方向的元素，当HTML元素中设置了dir属性时该伪类才能生效。现时支持的阅读方向有两种：ltr（从左往右）和rtl（从右往左）。目前，只有火狐浏览器支持:dir伪类，并在火狐浏览器中使用时需要添加前缀( -moz-dir() )。
　　如下例，p元素中的阿拉伯语（阿拉伯语是从右往左阅读的）文本会变成橙色。

image.png
image.png
如下例，p元素中的英语文本会变成蓝色
image.png
image.png
2 :lang
　　:lang匹配设置了特定语言的元素，设置特定语言可以通过为了HTML元素设置lang=””属性，设置meta元素的charset=””属性，或者是在http头部上设置语言属性。
　　实际上，lang=””属性不只可以在html标签上设置，也可以在其他的元素上设置。
　　如下例，分别给不同的语言设置不同的引用样式：
image.png
image.png

五．其他

1 :root
　　:root匹配文档的根元素。一般的html文件的根元素是html元素，而SVG或XML文件的根元素则可能是其他元素。
　　如下例，将html元素的背景设置为橙色

image.png

2. :fullscreen
   　　:fullscreen匹配处于全屏模式下的元素。全屏模式不是通过按F11来打开的全屏模式，而是通过Javascript的Fullscreen API来打开的，不同的浏览器有不同的Fullscreen API。目前，:fullscreen需要添加前缀才能使用。
   　　如下例，当处于全屏模式时，h1元素的背景会变成橙色
   image.png
   image.png
   image.png

伪元素

用于将特殊的效果添加到某些选择器。
DOM树中创建了一些抽象元素，这些抽象元素是不存在于文档语言里的（可以理解为HTML源码）。比如：documen接口不提供访问元素内容的第一个字或者第一行的机制，而伪元素可以使开发者可以提取到这些信息。并且，一些伪元素可以使开发者获取到不存在于源文档中的内容（比如常见的::before,::after）。
一个选择器只能使用一个伪元素，并且伪元素必须处于选择器语句的最后不排除未来会加入同时使用多个伪元素的机制
1 ::before/:before
　　:before在被选元素前插入内容。需要使用content属性来指定要插入的内容。被插入的内容实际上不在文档树中。

image.png
image.png
2 ::after/:after
　　:after在被元素后插入内容，其用法和特性与:before相似。
3 ::first-letter/:first-letter
　　:first-letter匹配元素中文本的首字母。被修饰的首字母不在文档树中。

4 ::first-line/:first-line
　　:first-line匹配元素中第一行的文本。这个伪元素只能用在块元素中，不能用在内联元素中。
5 ::selection
　　::selection匹配被用户选中或者处于高亮状态的部分。在火狐浏览器使用时需要添加-moz前缀。该伪元素只支持双冒号的形式。

image.png

6 ::placeholder
　　::placeholder匹配占位符的文本，只有元素设置了placeholder属性时，该伪元素才能生效。
　　该伪元素不是CSS的标准，它的实现可能在将来会有所改变，所以要决定使用时必须谨慎。
　　在一些浏览器中（IE10和Firefox18及其以下版本）会使用单冒号的形式。

image.png
image.png
7 ::backdrop(处于试验阶段)
　　::backdrop用于改变全屏模式下的背景颜色，全屏模式的默认颜色为黑色。该伪元素只支持双冒号的形式
image.png
image.png
伪类的效果可以通过添加一个实际的类来达到，而伪元素的效果则需要通过添加一个实际的元素才能达到
image.png
image.png
通过增加一个first-letter 类实现伪类效果
image.png
image.png
通过增加一个span然后给span增加样式实现伪元素效果
伪元素和伪类之所以这么容易混淆，是因为他们的效果类似而且写法相仿，但实际上 CSS 为了区分两者，已经明确规定了伪类用一个冒号来表示，而伪元素则用两个冒号来表示。