`
Virgo_S
  • 浏览: 1151189 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

9、CSS的Pseudo Classes 伪类

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

  伪类像是指定选择器状态或关联选择器的门闩。它们的形式如:selector:pseudo class { property: value; },在选择器和伪属性之间使用冒号。
  link 没有点击过的链接 
  visited以点击过的链接 
  active获得焦点时的链接(比如在点击时) 
  hover 鼠标在链接上面

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;} ...

    前端开源库-pseudo-classes

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

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

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

    前端开源库-pseudo-classes.zip

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

    Pseudo

    **CSS伪类(Pseudo-classes)**: CSS伪类是CSS中一个特殊的概念,用于选择处于特定状态的元素,比如`:hover`用于选择鼠标悬停时的元素,`:active`表示元素被激活(如按下按钮),`:focus`则是在元素获得焦点时应用...

    css20_css_

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

    Opdracht-012---CSS-Pseudo-classes

    【标题】"Opdracht-012---CSS-Pseudo-classes"是一个关于CSS伪类的练习任务。在网页设计中,CSS(层叠样式表)是用于控制网页元素外观的关键技术之一。伪类是CSS中一个特殊的概念,它允许我们针对元素的不同状态或...

    map-pseudo-classes:使用 JS map() 实现 CSS psuedo-classes

    映射伪类使用 JS map() 实现 CSS psuedo-classes 这些示例演示了如何使用map()模拟伪类。 使用 React.js,使用内联样式变得流行起来。 在示例目录中有一些组件,它们演示了如何在没有 CSS 的情况下重现某些pseude-...

    深入理解CSS中的UI伪类

    伪类(Pseudo classes)是选择符的螺栓,用来指定一个或者与其相关的选择符的状态。它们的形式是 selector:pseudo class { property: value; },简单地用一个半角英文冒号(:)来隔开选择符和伪类。 伪类可以分为两...

    CSS:使用伪类的具有视觉效果的自定义HTML5表单验证

    CSS中的伪类(Pseudo-Classes)是关键,特别是`:valid`和`:invalid`这两个伪类。当输入字段的值符合验证规则时,`:valid`伪类会被应用;反之,如果不符合规则,则`:invalid`伪类会被激活。我们可以为这两个伪类设置...

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

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

    CSS伪类和伪元素的区别详解

    伪类(Pseudo-classes)是用于向已存在的HTML元素添加特殊效果的选择器。这些效果通常与元素的状态有关,例如`:hover`(鼠标悬停)、`:active`(活动状态)和`:focus`(获取焦点)。伪类不会在DOM(文档对象模型)中...

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

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

    那些不常用却很有的CSS小结

    一.CSS Pseudo-Classes 伪类 1.Selector : hover { sRules } 设置对象在其鼠标悬停时的样式表属性。 在CSS1中此伪类仅可用于a对象。且对于无href属性(特性)的a对象,此伪类不发生作用。在CSS2中此伪类可以应用于...

    浅谈CSS伪类与伪元素

    首先,我们来讨论伪类(Pseudo-classes)。伪类用于表示元素的特定状态,比如用户交互状态、文档树中的位置状态等。一个元素可能因为用户的交互或文档中的位置,而具有不同的状态。伪类选择器基于这些动态状态,为...

    css2中文手册

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

    css2.0中文手册

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

    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