美文网首页
css的伪类选择器

css的伪类选择器

作者: 放不下FBX | 来源:发表于2018-10-24 20:42 被阅读0次

伪类:同一个标签,根据其不同的种状态,有不同的样式。这就叫做“伪类”。伪类用冒号来表示。

比如div是属于box类,这一点很明确,就是属于box类。但是a属于什么类?不明确。因为需要看用户点击前是什么状态,点击后是什么状态。所以,就叫做“伪类”。

静态伪类和动态伪类
伪类选择器分为两种。

(1)静态伪类:只能用于超链接的样式。如下:

:link 超链接点击之前
:visited 链接被访问过之后
PS:以上两种样式,只能用于超链接。

(2)动态伪类:针对所有标签都适用的样式。如下:

:hover “悬停”:鼠标放到标签上的时候
:active “激活”: 鼠标点击标签,但是不松手时。
:focus 是某个标签获得焦点时的样式(比如某个输入框获得焦点)
PS:以上三种样式,只能用于超链接。

超链接a标签
超链接的四种状态
a标签有4种伪类(即对应四种状态),要求背诵。如下:

:link “链接”:超链接点击之前
:visited “访问过的”:链接被访问过之后
:hover “悬停”:鼠标放到标签上的时候
:active “激活”: 鼠标点击标签,但是不松手时。
对应的代码如下:(不带注释)
a:link{
color:red;
}
a:visited{
color:orange;
}
a:hover{
color:green;
}
a:active{
color:black;
}
对应的代码如下:(带注释)
/让超链接点击之前是红色/
a:link{
color:red;
}

/让超链接点击之后是绿色/
a:visited{
color:orange;
}
/鼠标悬停,放到标签上的时候/
a:hover{
color:green;
}
/鼠标点击链接,但是不松手的时候/
a:active{
color:black;

相关文章

  • 伪类和伪元素

    伪类:CSS 伪类用于向某些选择器添加特殊的效果。 伪元素:CSS 伪元素用于向某些选择器设置特殊效果。 1、伪类...

  • CSS3选择器

    1CSS选择器的分类 基本选择器 层次选择器 伪类选择器 动态伪类选择器 目标伪类选择器 语言伪类选择器 UI元素...

  • CSS伪类选择器总结

    CSS伪类选择器总结 动态伪类选择器:link, 链接伪类选择器,超链接未被访问前:visited, 链接伪类选择...

  • JQuery CSS选择器

    CSS普通选择器 选择器函数 CSS伪类选择器

  • CSS3选择器--结构性伪类选择器

    在学习结构性伪类选择器之前,先了解2个概念:CSS中的伪类选择器和伪元素: 1、伪类选择器:CSS中已经定义好的选...

  • CSS进阶知识点--CSS3伪类选择器和伪元素

    伪类选择器 动态伪类(锚点伪类、用户行为伪类) UI元素状态伪类 CSS3结构伪类 否定选择器 伪元素 动态伪类 ...

  • 伪元素和伪类

    一、伪类 1.1 定义 css伪类:css伪类用于向某些选择器添加特殊效果。 伪类其实与普通的css类相类似,可以...

  • css伪元素

    css 伪元素 详述: 这篇文章是继 css的伪类 与 css 伪类选择器 后的 CSS伪元素总结, 意在总结连贯...

  • CSS选择器

    简单概括一下CSS的选择器 基本选择器 属性选择器 伪类选择器 动态伪类 常用的四个锚点伪类 UI元素状态伪类 :...

  • CSS自带的伪类选择器

    我们使用CSS自带的伪类选择器,从而可以更加方便的完成页面点击事件 css伪类选择器:分为静态和静态 静态伪类 只...

网友评论

      本文标题:css的伪类选择器

      本文链接:https://www.haomeiwen.com/subject/hhxftqtx.html