微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-链接伪类 :active | :link | :visited | :hover

红太狼 2024-02-19 16:24 17阅读 0赞

### 伪类-链接伪类 :active | :link | :visited | :hover ###

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][https_edu.csdn.net_topic_huangjuhua]  
通用语法  
锚伪类  
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}		/* 未访问的链接 */
    a:visited {color: #00FF00}	/* 已访问的链接 */
    a:hover {color: #FF00FF}	/* 鼠标移动到链接上 */
    a:active {color: #0000FF}	/* 选定的链接 */

提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。  
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。  
提示：伪类名称对大小写不敏感。

伪类与 CSS 类  
伪类可以与 CSS 类配合使用：

a.red : visited {color: #FF0000}
    <a class="red" href="css_syntax.asp">CSS Syntax</a>

假如上面的例子中的链接被访问过，那么它将显示为红色。

### 小程序应用 ###

[防采集标记：黄菊华老师的课程和资料][Link 1]

**支持和不支持**  
 :active  
 :link - 不支持  
 :visited - 不支持  
 :hover

> Wxml代码

<navigator>
    链接文本文字
    </navigator>
    
    <navigator url='/pages/04xzq/07-weilei'>
    链接文本文字
    </navigator>
    
    
    <navigator url='/pages/04xzq/07-weilei'>
    <text>链接文本文字</text>
    </navigator>

> Wxss代码

/* 向未被访问的链接添加样式。-不支持  */
    navigator:link{ 
      color:red;
    }
    
    /* 向已被访问的链接添加样式。-不支持 */
    navigator:visited{ 
      color:yellow;
    }
    
    /* 当鼠标悬浮在元素上方时，向元素添加样式。 */
    navigator:hover{
      color:palevioletred;
    }
    
    /* 向被激活的元素添加样式。 */
    navigator:active{
      color:blue;
    }

效果图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]

[欢迎大家学习我的视频课程：微信小程序界面设计-小程序中的WXSS(css)选择器课程][-_WXSS_css]

![微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-链接伪类 :active |  :link | :visited | :hover][WXSS_css_-_-_ _active _ _link _ _visited _ _hover]

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[Link 1]: http://www.4317.org/ke/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM4MTgyMDU_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/e10f84c0017b480491dd9be6edeb23d3.png
[-_WXSS_css]: https://ke.qq.com/course/371755?tuin=2b10d56
[WXSS_css_-_-_ _active _ _link _ _visited _ _hover]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/245107ceab5d4fae83cb5b8a7443ff89.png