伪类

 一、连接伪类
针对连接的伪类一共有 4 个,由于连接始终会处于以下 4种状态之一。
  Link。此时,连接就在那儿等着用户点击。
  Visited。用户此前点击过这个连接。
  Hover。鼠标指针正悬停在连接上。
  Active。连接正在被点击(鼠标在元素上按下,尚未释放)。
如下就是这些状态对应的 4个伪类选择符(使用了 a 选择符和一些示例声明) :
a:link {color:black;}
a:visited {color:gray;}
a:hover {text-decoration:none;}
a:active {color:red;}
因为这 4 个伪类的特指度(本章后面再讨论特指度)相同, 若是不按照这里列出
的顺序使用它们,浏览器可能不会显示预期结果。为了好记,我建议你们能够这

么想: “LoVe? HA!”大写字母就是每一个伪类的头一个字母 浏览器


2.  :focus 伪类
e :focus
在这个以及后续的例子中, e 表示任何元素,如 p 、 h1 、 section ,等等。
表单中的文本字段在用户单击它时会得到焦点,而后用户才能在其中输入字符。下
面的规则
input:focus {border:1px solid blue;}
会在光标位于 input 字段中时,为该字段添加一个蓝色边框。这样能够让用户明确
地知道输入的字符会出如今哪里。 spa


3.  :target 伪类
e :target
若是用户点击一个指向页面中其余元素的连接,则那个元素就是目标(target) ,能够
用 :target 伪类选中它。
对于下面这个连接
<a href="#more_info">More Information</a>
位于页面其余地方、ID为 more_info 的那个元素就是目标。该元素多是这样的:
<h2 id="more_info">This is the information you are looking for.</h2>
那么,以下 CSS规则
#more_info:target {background:#eee;}
会在用户单击连接转向 ID为 more_info 的元素时,为该元素添加浅灰色背景。
指针

相关文章
相关标签/搜索