伪类

作者: 小金鱼要努力 | 来源:发表于2017-04-07 16:21 被阅读0次

CSS权威指南定义:a(锚)元素分为两种类型,已访问的和未访问的。这些类型称为伪类。

伪类一开始单单只是用来表示一些元素的动态状态,典型的就是链接的各个状态。随后CSS2标准扩展了其概念范围,使其成为了所有逻辑上存在但在文档树中却无须标识的“幽灵”分类。

类与伪类的区别:类不需要用户或者浏览器做什么动作以及状态就可以显示的效果。而伪类是需要用户做出某种动作之后才显示的效果。 伪类中最典型的例子是:对于链接的控制。 对链接的操作状态有四种:link(链接)、visited(已访问的链接)、hover(鼠标停在上方的)、active(激活时的状态)。

伪类例子

a:visited{color:red;}

分隔a和visited的冒号是伪类或伪元素的“名片”。

链接伪类

:link -- 指示作为超链接(即有一个href属性),并且指向一个未访问地址的所有锚。

:visited -- 指示作为已访问地址超链接的所有锚。

1. :link不可省略,因为单纯使用a来匹配,会把那些不包含href属性的a元素也匹配进来。

2. :link和visited是静态的,第一次现实之后,一般不会再改变文档的样式。

动态伪类

:focus -- 指示当前拥有输入焦点的元素

:hover -- 指示鼠标停留在哪个元素上

:active -- 指示被用户输入激活的元素,例如鼠标指针停留在一个超连接上时,如果用户点击鼠标,就会激活这个超链接,:active将会指示这个超链接。

:first-child

静态伪类,用来选择元素的第一个子元素。

p:first-child{font-weight:bold;} --> 将作为某元素第一个子元素的所有p元素设置为粗体。

li:first-child{text-transform:uppercas;} --> 将作为某元素第一个子元素的所有li元素变成大写。

相关文章

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

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

  • 第十二章 高级选择器

    伪类和伪元素区别 伪类一个冒号,伪元素两个冒号 一,伪类选择器 伪类性质: 伪类性质:加冒号不会对页面产生布局结...

  • jQuery添加/移除伪类(hover)

    伪类演示: 移除伪类:removeClass(hover) 结果是同上,没有任何变化。 :hover是伪类,伪类是...

  • CSS伪类和伪元素

    1. 什么是伪类和伪元素1.1. 伪类1.2. 伪元素1.3. 伪类与伪元素的区别 2. 使用 1. 什么是伪类和...

  • CSS

    伪类的语法: CSS 类也可与伪类搭配使用。 伪元素

  • 细说CSS伪类和伪元素

    原文 博客原文 大纲 1、伪元素2、伪类元素3、伪元素和伪类元素的区别4、伪类和伪元素的使用 1、伪元素 伪元素在...

  • CSS3 积累(2)之结构伪类选择器

    介绍 伪类选择器主要有动态伪类选择器、UI元素状态伪类选择器、结构伪类选择器和伪元素等,这篇主要讲讲什么是结构伪类...

  • 伪类和伪元素初探

    Css3为了区分伪类和伪元素,伪类使用单冒号:,伪元素使用双冒号:: 常见伪类有 :hover,:link,:ac...

  • 伪元素和伪类

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

  • css伪类(Pseudo-classes) & after be

    anchor伪类 Eg: 伪类和CSS类 伪类可以与 CSS 类配合使用: 在一个节点前后加节点

网友评论

      本文标题:伪类

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