a标签的伪类

Posted 2020-12-23 featherwit

a标签的伪类

概念

a标签可以根据用户行为不同，划分为四种状态，通过a标签的伪类可以将四种状态选择设置为不同的样式效果，用户触发对应行为，就可以加载对应的样式

普通的类: 必须给标签设置对应的class属性值，才能选中标签，而且类选择器后面添加的属性，会立即加载到浏览器上

伪类: 不需要给标签添加任何属性，伪类名都是语法提前规定好的，书写时伪类必须满足搭配其他选择器使用，伪类后面添加的样式不一定立即加载到浏览器之上，只有用户触发了对应的行为，伪类的样式才会立即加载

伪类的权重和普通的类相同

伪类的写法: 前面是普通浏览器，后面紧跟:伪类名

a:link{                 /* 访问前状态 */    
    color: gray;
}    
a:visited{             /* 访问后状态 */
    color: cyan;
}
a.hover{              /* 鼠标悬停状态 */
    color: red;
}
a.active{            /* 鼠标点击状态 */
    color: yellow;
}

 

书写顺序

a标签上可能会同时触发2到3个状态，每个状态的书写都会进行加载，相同的书写之间会发生层叠。

伪类的权重是相同的，只能根据书写顺序，后写的层叠先写的，所以伪类书写顺序非常重要。

要想让每个伪类的状态正常加载，书写顺序必须是: 访问前link、访问后visited、鼠标移上hover、鼠标点击active

 

实际应用

一般会将访问前和访问后的状态设置为一样的效果，保证了页面的统一性，可以选择性的设置鼠标移上和鼠标点击状态。

a:link, a:visited{
    color: #666;
}
a:hover{
    color: #f00;
}

更加常用的一种设置方式如下:

a标签任何普通的选择器，可以同时选中四种状态，可以将四种状态设置为相同的样式，属性可以设置所有的a标签默认显示样式的属性，包括盒模型、文字等。

a:hover伪类选择器: 设置鼠标移上时不一样的样式属性。

a{
    display: block;
    width: 150px;
    height: 50px;
    background-color: skyblue;
    font: bold 20px/50px  "微软雅黑";
    text-align: center;
    color: #fff;
    text-decoration: none;  
}
a:hover{
    background-color: # yellowgreen;
}