调整CSS类型的顺序改变链接翻滚效果_CSS/HTML

链接状态

典型的CSS翻滚效果依赖于超链接中四个状态之一的独立类型。可以建立附带CSS预先类的＜A＞（超链接）类型以指定链接状态：

a:link——常规，非访问超链接

a:visited——访问超链接

a:hover——访问者操作鼠标通过时的链接

a:active——点击链接

为了能够使典型的CSS翻滚效果正常工作，CSS代码中的CSS类型顺序显得非常重要，无论它是一个外部类型表格或者是嵌入在HIML页标题栏中的类型规则。

a:link类型出现的时间为最早，因为它可应用于所有的链接。a:visited类型排第二，它将取代任何链接的a:link格式。(如果a:link类型紧跟着的是a:visited，a:link可能会取代a:visited类型。)其次是a:hover类型，此类型只应用于访问鼠标下的链接。最后是a:active，所以，当链接被点击时，它可以取代所有其它的类型。

a:link {

color: #0000FF;

text-decoration: underline;

font-weight: normal;

font-style: normal;

}

a:visited {

color: #3399FF;

text-decoration: underline;

background-color: #FFFFFF;

font-weight: normal;

font-style: italic;

}

a:hover {

color: #0000FF;

text-decoration: underline;

background-color: #FFFF00;

font-weight: bold;

font-style: normal;

}

a:active {

color: #FF0000;

text-decoration: none;

background-color: #CCCCCC;

font-weight: bold;

font-style: normal;

}

在CSS代码中的类型顺序确定了每一种类型如何取代其它的类型，即更多的类型可以应用到特定的元素。正常情况下，a:hover类型处于a:link和a:visited类型之后，所以hover状态的类型可以应用于常规和访问的链接。但是，它也并非必须遵循这一方式，你可以改变类型顺序实现不同的效果。

假设你想在非访问链接中使用翻滚效果，但不想影响到其它访问链接，你或许想到通过代码来处理这种外形上改变，然而你所要做的是重新组织CSS代码。

从访问链接中移除翻滚效果，可以通过很简单地移除a:visited类型。

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

来源：网页教学网

声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com