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

时间:2024-03-15 18:18:15

伪类-链接伪类 :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)选择器课程-伪类-链接伪类 :active | :link | :visited | :hover

欢迎大家学习我的视频课程:微信小程序界面设计-小程序中的WXSS(css)选择器课程
https://edu.csdn.net/course/detail/12854
微信小程序界面设计小程序中的WXSS(css)选择器课程-伪类-链接伪类 :active | :link | :visited | :hover