CSS伪类整理笔记

0 伪元素

　　虚拟的一个元素，用于向已有的元素添加特殊效果，可用标签元素实现该效果。

　　css3中规定：伪元素的由两个冒号::开头，然后是伪元素的名称。用两个冒号::是为了区别伪类和伪元素（CSS2中并没有区别）。当然，考虑到兼容性，CSS2中已存的伪元素仍然可以使用一个冒号:的语法，但是CSS3中新增的伪元素必须使用两个冒号::

　　一个选择器一般来说只能使用一个伪元素，并且伪元素必须处于选择器语句的最后。

　　常见的伪元素有以下几种：

 ::after
 ::before
 ::first-letter
 ::first-line
 ::selection
 ::backdrop

　　(1) ::selection CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。

　　(2) ::first-letter会选中某 block-level element（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容（如图片和内联的表格） 。

　　(3) ::first-line CSS pseudo-element （CSS伪元素）在某 block-level element （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。

　　　  ::first-line 不能匹配任何真实存在的html元素。

　　     ::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption中有用.。在其他的类型中，::first-line 是不起作用的。

　　(4) 伪元素就是控制需要视觉聚焦的元素后面的背景元素样式的。例如<video>

 video::backdrop {
     background-color: #fff;
     background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
     background-size: 16px 16px;
     background-position: 0 0, 8px 8px;
 }

1 伪类

　　伪类是为了通过选择器找到文档树中不存在的信息或基本选择器找不到的信息。

　　css3中规定，伪类由一个冒号:开头，冒号后面是伪类的名称和包含在圆括号中的可选参数。

　　任何常规选择器可以再任何位置使用伪类。

　　伪类语法不区别大小写。一些伪类的作用会互斥，另外一些伪类可以同时被同一个元素使用。并且，为了满足用户在操作DOM时产生的DOM结构改变，伪类也可以是动态的。

　　*当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。你可能希望某个元素在处于某种状态下呈现另一种样式，例如当鼠标悬停在元素上面时，或者当一个复选框被禁用或被勾选时，又或者当一个元素是它在 DOM 树中父元素的第一个子元素时。

　　常见的伪类及其功能可以用下图表示：

　　1. :active :它让页面能在浏览器监测到激活时给出反馈。当用鼠标交互时，它代表的是用户按下按键和松开按键之间的时间。 :active 伪类通常用来匹配tab键交互。通常用于但并不限于 <a> 和 <button> HTML元素。这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 :link，:hover和 :visited。为了正常加上样式，需要把 :active的样式放在所有链接相关的样式后，这种链接伪类先后顺序被称为LVHA顺序: :link — :visited — :hover — :active。（伪类之间的权重相同，遵守后面覆盖前面的特性）。

　　2. :indeterminate CSS 伪类 表示状态不确定的表单元素。

　　3. :in-range CSS 伪类 代表一个 <input> 元素，其当前值处于属性min 和max 限定的范围之内.

　　4. :optional CSS 伪类 表示任意没有required属性的 <input><select> 或 <textarea> 元素使用它。

　　5. :invalid CSS 伪类 表示任意内容未通过验证的 <input> 或其他 <form> 元素 .

　　6. :visited CSS伪类表示用户已访问过的链接。出于隐私原因，可以使用此选择器修改的样式非常有限.这个样式可能会被后声明的其他链接相关的伪类覆盖，这些伪类包括 (:link, :hover,和:active)。要适当地设置链接样式，请将:visited 规则放在:link 规则之后，但在:hover 和:active 规则之前，参照 LVHA 顺序::link — :visited — :hover — :active。

　　7. :target CSS 伪类 代表一个唯一的页面元素(目标元素)，其id 与当前URL片段匹配 .

　　8. :lang() CSS 伪类基于元素语言来匹配页面元素。

2 伪类与伪元素的特性及其区别

1. 伪类本质上是为了弥补常规CSS选择器的不足，以便获取到更多信息；
2. 伪元素本质上是创建了一个有内容的虚拟容器；
3. CSS3中伪类和伪元素的语法不同；
4. 可以同时使用多个伪类，而只能同时使用一个伪元素；

　　在css2中并没有明确区分伪元素和伪类。