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

版权声明：黄菊华 https://blog.csdn.net/u013818205/article/details/86605895

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

通用语法
锚伪类
在支持 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>

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

小程序应用

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

支持和不支持
 :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;
}

效果图

欢迎大家学习我的视频课程：微信小程序界面设计-小程序中的WXSS(css)选择器课程
https://edu.csdn.net/course/detail/12854