通过CSS类型的顺序改变翻滚效果

在CSS代码中的类型顺序确定了每一种类型如何取代其它的类型，即更多的类型可以应用到特定的元素。正常情况下，a:hover类型处于a:link和a:visited类型之后，所以hover状态的类型可以应用于常规和访问的链接。但是，它也并非必须遵循这一方式，你可以改变类型顺序实现不同的效果。
 
假设你想在非访问链接中使用翻滚效果，但不想影响到其它访问链接，你或许想到通过代码来处理这种外形上改变，然而你所要做的是重新组织CSS代码。

从访问链接中移除翻滚效果，可以通过很简单地移除a:visited类型。如以下代码改变CSS代码中类型顺序可以改变访问链接中翻滚效果：

a:link {

    color: #0000FF;

    text-decoration: underline;

    font-weight: normal;

    font-style: normal;

}

a:hover {

    color: #0000FF;

    text-decoration: underline;

    background-color: #FFFF00;

    font-weight: bold;

    font-style: normal;

}

a:visited {

    color: #3399FF;

    text-decoration: underline;

    background-color: #FFFFFF;

    font-style: italic;

    font-weight: normal;

}

a:active {

    color: #FF0000;

    text-decoration: none;

    background-color: #CCCCCC;

    font-weight: bold;

    font-style: normal;

}

注意，a:visited类型中包含指定所有与a:hover相同属性的规则，否则，当访问者的鼠标通过一个访问链接时，没有被a:visited类型取代的任何a:hover类型属性将会继续再现。

增添其它效果

除非被其它顺序的类型取代，以前的类型将会继续使用相同的元素。所以，仔细选择链接状态类型的特征和顺序可以让你对非访问和访问链接建立不同的翻滚效果。

例如，删除背景颜色：#FFFFFF，以上第二个范例代码中的a:visited类型规则将允许背景颜色从a:hover类型应用到访问链接。结果为非访问链接的翻转效果添加了背景颜色和粗体文本。