CSS伪类介绍 (上)

伪类这个叫法源自他们与类相似，但实际上并没有类会附加到标记中。

伪类分为两种

UI（User Interface，用户界面）伪类会在HTML元素处于某个状态时（比如鼠标指针位于链接上），为该元素应用CSS样式

UI伪类会基于特定HTML元素的状态应用样式。最常使用UI伪类的元素是链接（a元素），利用UI伪类，链接可以在用户鼠标悬停时改变文本颜色，或者去掉文本的下划线。此外，还可以有其他响应方式，比如悬停时显示一个信息面板，相关内容在我们讨论交互组件的时候再聊。

 

1. 链接伪类

针对链接的伪类一共有4个，因为链接始终会处于如下4种状态之一。

Link。此时，链接就在那儿等着用户点击。

Visited。用户此前点击过这个链接。

Hover。鼠标指针正悬停在链接上。

Active。链接正在被点击（鼠标在元素上按下，还没有释放）。

以下就是这些状态对应的4个伪类选择符（使用了a选择符和一些示例声明）：

  a:link{color: black;}
  a:visited{color: gray;}
  a:hover{color: yellow;}
  a:active{ color: red;}

 

 如果不按照这里列出的顺序使用他们，浏览器可能不会显示出预期的结果，建议使用“LoVe?HA!” （爱 ( love)和恨 (hate)），大写字母就是每个伪类的第一个字母。链接的默认状态是黑色，带下划线。鼠标移到上面时（悬停状态），链接的下划线消失，颜色仍然是黑色。当用户在链接上按下鼠标时（活动状态），链接变成红色。而在链接被点击后，也就是鼠标在链接上按下，又在链接上释放后，会触发浏览器打开URL，此后（或者更准确地说，到浏览器访问历史中的这个URL过期或被用户删除之前），链接会一直显示为灰色

 

 

有些伪类可以用于任何元素，而不仅是a元素。比如，下面这条规则可以让段落背景在鼠标悬停是变成灰色：

  p:hover{background-color:grey;}

 

2. :focus伪类

 

e:focus    e表示任何元素，如p、h1、section、等等

 

表单中文本字段在用户单击时会获得焦点，然后用户才能在其中输入字符，下面的规则

  input:focus {border:1px solid blue;}

3. :target伪类

 

e:target如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（target），可以用:target伪类选中它。

对于下面这个链接

<a href="#more_info">more infomation</a>

位于后面的元素

<h2 id="more_info">This is infomation</h2>

那么如下CSS规则

#more_info:target{background-color: #eee;}

 会在用户单击链接转向ID为more_info的元素时，为该元素添加浅灰色背景