如何使用CSS的伪类

CSS的伪类用于向某些选择器添加特殊的效果,最常用的便是向超链接中添加样式,如颜色,字体大小,粗细等。使用标签选择器同样可以设置超链接的样式,但是加入了伪类可以让超链接在操作过程中展示不同的效果。

操作方法

  • 01

    在伪类的使用过程中,锚伪类是应用最为广泛的,链接的不同状态都可以用伪类以不同的方式显示,这些状态包括:未被访问状态,已被访问状态,鼠标悬停状态和激活状态。我们使用a : link { color: red }来设置未被访问的链接,如下图所示。

  • 02

    使用a:visited {color : pink;}设置已访问过的链接,当页面已经在浏览器打开并点击链接后,显示的便是访问过的效果,如下图所示。如果想要还原成未访问之前的状态,重新打开页面是不行的,需要清除浏览器的缓存才可。

  • 03

    使用a:hover {color : yellow;}设置鼠标悬停在链接上显示的效果,当鼠标显示为手型时,页面链接变为设置的效果,如下图所示。

  • 04

    使用a:active {color : green;}设置激活链接的效果,只有当鼠标点击的时候才起作用。设置a标签被激活时的样式(被点击时的样式),代码如下图所示。需要注意的是一定要按照顺序a:link,a:visited,a:hover,a:active来设置,否则不能达到预期的效果。

  • 05

    first-child 伪类,可以使用first-child伪类来选择元素的第一个子元素,如下图第一个元素分别为<p>元素的第一个元素和<li>元素的第一个元素。

  • 06

    :lang 伪类,可以为不同的语言定义特殊的规则。如下图所示,lang 类为属性值为 no 的q元素定义引号的类型:q:lang(no) { quotes: "(" ")" }。

  • 07

    :focus伪类,可以设置点击鼠标时的聚焦效果,如下图所示,当我们点击用户名文本框时出现黄色的背景色。

(0)

相关推荐

  • css第一个元素

    操作方法 01 在做网页的JS特效时,CSS的隐藏和显示是被经常使用的,通常是让一组标签全部隐藏,让组元素的第一个标签作为默认并显示,那就要用到css中的伪类选择器. CSS的伪类选择器有很多种,在这 ...

  • CSS 类选择器,html(css) class如何使用?

    在 CSS 中,类选择器以一个点号显示: .center{text-align: center} .red{color:red;} .div1 .div2{color:yellow} .div3.di ...

  • 在Frontpage 中定义网页CSS样式

    说明:目前Frontpage的最新版本是FrontpageXP(Frontpage 2003),本文是以Frontpage2000讲述的,但本文所描述的方法在FrontpageXP中基本上是适用的!另 ...

  • Html/Css(新手入门第一篇必看攻略)

    下面小编就为大家带来一篇Html/Css(新手入门第一篇必看攻略).小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧一.理解web标准含义--为什么采用web标准 **** ...

  • css制作放大缩小图标;css制作放大镜

    浏览器商城网站,会发现很多商城图片都是可以放大进行查看图片细节部分,采用放大镜缩小图标代替文字可以给予用户更好的体验效果.放大缩小图标其实可以直接使用css进行制作.(注意:最后一个步骤含有小图标所有 ...

  • css怎么清除浮动

    清除css浮动几乎可以说的每个web前端开发者所必备的技能之一,但有些刚刚接触html.css的童鞋,还不懂如何清除css浮动,导致页面布局错乱,本文将介绍三种清除css浮动的方法 操作方法 01 首 ...

  • CSS优先级详解

    优先级是根据由每种选择器类型构成的级联字串计算而成的. 它不是一个对应相应匹配表达式的权重值. 如果优先级相同,元素最终会应用 CSS 中靠后的声明. 操作方法 01 优先级顺序 下列是一份优先级逐级 ...

  • 伪元素怎么使用呢?

    对于一个使用 HSL 表示的颜色,我们只需要改变 L (亮度)的值,就可以得到一个更亮一点或者更暗一点的颜色. 操作方法 01 这里要科普一下颜色值的小知识.我们熟知的颜色表示法除了 #fff ,rg ...

  • CSS 多浏览器兼容性问题及解决方案

    操作方法 01 兼容性处理要点1.DOCTYPE 影响 CSS 处理2.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !importa ...