`
ningzhisheng
  • 浏览: 12266 次
  • 性别: Icon_minigender_1
最近访客 更多访客>>
社区版块
存档分类
最新评论

CSS教程10 CSS的Pseudo Classes 伪类

阅读更多
请你注意一些CSS伪类属性不被所有浏览器支持,但有四个伪类可以安全使用在链接上

  伪类像是指定选择器状态或关联选择器的门闩。它们的形式如:selector:pseudo class { property: value; },在选择器和伪属性之间使用冒号。

Example Source Code [www.52css.com]
  link 没有点击过的链接
  visited以点击过的链接
  active获得焦点时的链接(比如在点击时)
  hover 鼠标在链接上面
Example Source Code [www.52css.com]
a.snowman:link {
    color: blue;
}
a.snowman:visited {
    color: purple;
}
a.snowman:active {
    color: red;
}
a.snowman:hover {
    text-decoration: none;
    color: blue;
    background-color: yellow;
}
  尽管CSS里可以省略它们,但维护不同颜色的链接对于新手是个很好的练习。由于伪类(相比hover)不是经常使用,作为公用属性是非常不幸的特性。由于这样,它不像以前那么重要,但如果为最优用户响应考虑,应该使用它。

  传统默认,文本链接是蓝色,访问后是紫色,理论上可以使用很多不同颜色效果,但,再次,逐渐广泛使用CSS,使得链接变得不再普通,平均用户也不再认为链接必须是蓝色或紫色。

  除了链接其他元素也可以使用hover伪类。不幸的是,ie7以下的浏览器不支持,这样有许多漂亮的效果不能在IE上实现。
分享到:
评论

相关推荐

    CSS 伪类(Pseudo-classes)

    CSS 伪类(Pseudo-classes) CSS伪类是用来添加一些选择器的特殊效果。 语法 伪类的语法: selector:pseudo-class {property:value;} CSS类也可以使用伪类: selector.class:pseudo-class {property:value;} ...

    css+div布局和css教程和css的api

    接下来,我们提到的“CSS的API”可能是指CSS规范中的函数或接口,虽然CSS本身并不像JavaScript那样提供完整的编程接口,但CSS Level 2.0引入了一些高级特性,如条件注释(@media)、伪类(:hover、:active、:focus)...

    前端开源库-pseudo-classes

    前端开源库-pseudo-classes伪类,获取所有CSS伪类的列表。

    Pseudo

    结合压缩包的名称"Pseudo"和标签“字体”,我们可能推测这个包内包含了一些关于自定义字体的CSS伪类或伪元素的示例、教程或者资源。例如,可能包含一些使用`@font-face`规则引入自定义字体的CSS代码,或者展示如何...

    CSS2.0_CSS教程_

    手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    css20_css_

    CSS 2.0样式表中文手册手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 ...

    css详细教程.chm

     手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    前端开源库-pseudo-classes.zip

    在前端开发中,伪类(Pseudo-classes)是CSS中的一个重要概念,它们允许我们根据元素的状态或位置来定义不同的样式。在这个名为“前端开源库-pseudo-classes.zip”的压缩包中,很可能是包含了关于如何在各种开源前端...

    电脑css学习教程电脑css学习教程

    为了更好地学习CSS,你需要不断地练习和尝试,创建自己的项目,不断探索新的CSS特性,如动画(Animations)、过渡(Transitions)、伪类(Pseudo-classes)和伪元素(Pseudo-elements)等。同时,关注W3C标准的更新...

    css 中文教程,css 中文教程

    - **伪类(Pseudo-classes)**: 如`:hover`、`:active`和`:focus`,用于在特定状态时应用样式。 - **伪元素(Pseudo-elements)**: 如`::before`和`::after`,用于在元素前后插入内容。 - **选择器组合(Combinators...

    详解CSS中的伪类与伪元素及二者间的区别

    CSS伪类的概念及作用CSS伪类(Pseudoclasses)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态。它们的形式是selector:pseudoclass{property:value;},简单地用一个半角英文冒号(:)来隔开选择符和伪类。CSS很...

    CSS2.0和CSS3.0 最新中文版参考手册(完整版)

     手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    CSS2.0手册(苏沈小雨版)

    手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Se lectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

    CSS层叠样式表技术参考手册

    - **7.13 CSS伪类(Pseudo-classes)实例** - **伪类应用**:展示如何使用伪类表示元素的状态。 - **伪类效果**:演示伪类产生的视觉效果。 - **7.14 CSS伪元素(Pseudo-elements)实例** - **伪元素应用**:展示如何...

    CSS教程

    4. **伪类(Pseudo-classes)**:如`:hover`、`:active`、`:focus`等,用于元素在特定状态下的样式。 通过学习CSS,你可以创建响应式、美观且易于维护的网页。从基础的样式定义到复杂的布局技巧,掌握CSS将极大地...

    CSS Quick Syntax Reference

    How to apply CSS selectors: structural pseudo-classes, the negation pseudo-class, interaction pseudo-classes, pseudo-elements, and media queries How to use CSS property references like universal ...

    纯css3炫酷粒子动画特效

    这个特效主要依赖于CSS3的动画(Animations)和转换(Transforms)特性,以及可能的伪元素(Pseudo-elements)和伪类(Pseudo-classes)。下面我们将深入探讨这些关键知识点。 首先,**CSS3动画**是CSS3的一个重要...

    SS2.0和CSS3.0 最新中文版参考手册(完整版)

     手册提供了完整的 CSS2.0 的属性(Properties)、规则(At-Rules)、伪类(Pseudo-Classes)、伪元素(Pseudo-Elements)、声明(Declarations)、单位(Units)、选择符(Selectors)的介绍。其内容涵括了 W3C 的 CSS2.0 标准,...

Global site tag (gtag.js) - Google Analytics