Css伪类选择器之常见形式、动态伪类篇

伪类选择器

      伪选择器包括伪类和伪对象选择器，伪选择器以冒号（:）作为前缀标识符。冒号前可以添加选择器，限定伪类应用的范围，冒号后为伪类和伪对象名，冒号前后没有空格，否则将错认为类选择器：

• 单纯式，E:pseudo-class{property:value}

其中E为元素，E:pseudo-class为伪类名称，property是CSS的属性，value为CSS属性值。例如：a:link{color:red;}

• 混用式，E.class:pseudo-class{property:value}

      其中.class表示类选择符。把类选择符与伪类选择符组成一个混合式的选择器，能够设计更复杂的样式，以精确匹配元素。例如：a.selected:hover{color:blue;}
CSS3的伪类选择器主要包括4种：动态伪类、结构伪类、否定伪类和状态伪类，下面分节进行详细讲解。
一、动态伪类
      动态伪类是一类行为类样式，这些伪类并不存在于HTML中，只有当用户与页面进行交互时才能体现出来。动态伪类选择器包括两种形式：

• 锚点伪类，这是一种在链接中常见的样式，如:link、:visited
• 行为伪类，也称为用户操作伪类，如:hover、:active和:focus

   在/* 链接没有被访问时前景色为灰色 */
   .demo a:link{color: gray;} 
   /* 链接被访问后前景色为黄色 */
  .demo a:visited{color: yellow;}
   /* 鼠标悬浮在链接上时前景色为绿色 */
   .demo a:hover{color: green;}
   /* 鼠标击中激活链接那一下前景色为蓝色 */
   .demo a:active{color: blue;}

      对于这4个锚点伪类的设置，有一点需要特别注意，那就是它们的先后顺序，要让它们遵守一个顺序原则，也就是link ~ visited ~ hover ~ active 。如果把顺序搞错了，会带来意想不到的错误，如果是初学者，可以私下练习一下。其中:hover和:active又同时被列入到用户行为伪类中，它们所表达的意思如下：

• :hover：用于用户把鼠标移动到元素上面时的样式效果
• :active：用于用户单击元素时的样式效果，即按下鼠标左键时发生的样式，当松开鼠标左键该动作也就完成了
• :focus：用于元素成为焦点时的样式效果，这个经常用在表单元素上