CSS伪类整理笔记

0 伪元素

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

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

　　一个选择器通常来讲只能使用一个伪元素，而且伪元素必须处于选择器语句的最后。

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

1 ::after
2 ::before
3 ::first-letter
4 ::first-line
5 ::selection
6 ::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>

1 video::backdrop { 
2     background-color: #fff;
3     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); 
4     background-size: 16px 16px; 
5     background-position: 0 0, 8px 8px; 
6 }

 

 

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中并无明确区分伪元素和伪类。