`
小麦麦子
  • 浏览: 29279 次
文章分类
社区版块
存档分类
最新评论

CSS3中的伪类选择器详解

阅读更多

 

类选择器和伪类选择器区别

  类选择器我们可以随意起名,而伪类选择器是CSS中已经定义好的选择器,不可以随意起名。

  

伪类选择器以及伪元素

  我们把它放到这里

  p.aaas{

  text-align: left;

  color: red;

  }



 

    它同样的会被选择

  最常见的伪类选择器

  未被访问的链接

  a:link{ color: #ff6600 } /* 未被访问的链接 */

  我们来测试一下,我们给它添加一个超链接。

  伪类选择器

  我们给这个伪类选择器,选定样式,第一种

  a:link{

  color: #000;

  }

  link它是表示的未被访问的链接

  已被访问的链接

  a:visited{

  color: fuchsia;

  }

  然后是我们鼠标放上去的,一个颜色。

  a:hover{

  color :green;

  }

  当我们鼠标放上去的时候变成绿色。还有一个是当我们鼠标,正在被点击的时候。

  a:active{

  color: #ff6600;

  }

  就会显示橙色,这样就定义了一个伪类,当我们这个链接还没有访问的时候它就是黑色,当我们这个链接已经访问过后,在返回这个页面的时候呢,这个链接的颜色呢就会变成紫色,当我们鼠标经过它的时候呢,它就会变成绿色,当我们点击的时候,就是我们鼠标左键点下去,但并没有弹回来的时候呢它就会变成橙色。好那么我们来看一下效果。



 

  现在是这样的一个颜色,是紫色。紫色就表示我们已经访问过了。因为我们现在正在返回这个页面,那么在这里我们可以来更改一下,改成index1。

  伪类选择器

  因为index1不存在所以就不会存在被访问了。



 

 那么在没有访问是之前呢是黑色link,当我们的这个鼠标移动上去的话



 

   会变成绿色,当我们鼠标点击下去但是并没有松开,会变成

 



 

 

橙色。当我们松开之后呢它会访问,访问之后它就会变成紫色。我们新建一个页面index1,那这样单击之后再返回的时候就变成紫色的了。这就是伪类。

 

 

原文链接:http://www.maiziedu.com/wiki/css3/selector/

 

  • 大小: 11.3 KB
  • 大小: 13.2 KB
  • 大小: 13 KB
  • 大小: 14.2 KB
  • 大小: 13.6 KB
分享到:
评论

相关推荐

    css3 伪元素和伪类选择器详解

    伪类选择器:CSS中已经定义好的选择器,不能随便取名 常用的伪类选择器是使用在a元素上的几种,`如a:link|a:visited|a:hover|a:active`  提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是...

    详解如何使用CSS3中的结构伪类选择器和伪元素选择器

    结构伪类选择器介绍 结构伪类选择器是用来处理一些特殊的效果。 结构伪类选择器属性说明表  属性 描述 E:first-child 匹配E元素的第一个子元素。 E:last-child 匹配E元素的最后一个子元素。 E:nth-...

    CSS属性选择器详解.pdf

    CSS属性选择器详解.pdf

    详解CSS选择器HTML标签

    详解CSS选择器标签HTML 选择器 类别CLASS 选择器

    十种CSS选择器详解介绍

    1. 通用选择器 2. 标签选择器 3. ID 选择器 4. 类选择器 5. 后代选择器 6. 子选择器 8. 通用兄弟选择器 9. 分组选择器 10. 属性选择器 基础选择器总结

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

    CSS 伪类用于向某些选择器添加特殊的效果。CSS 伪元素用于将特殊的效果添加到某些选择器。 可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的...

    详解CSS3中属性选择器新增加的特性

    CSS3的诸多革命性改进中,对属性选择器的增强绝对是亮点之一,这里我们就来详解CSS3中属性选择器新增加的特性,需要的朋友可以参考下

    详解CSS3选择器:nth-child和:nth-of-type之间的差异

    然后两个选择器相对应的CSS代码如下: p:nth-child(2) { color: red; } p:nth-of-type(2) { color: red; } 上面这个例子中,这两个选择器所实现的效果是一致的,第二个p标签的文字变成了红色: 尽管上面两个demo...

    css类选择器的使用方法详解

    在css中类选择器就是在类名前面加一个点号了,如果是多类不是打多个点号而以.important.urgent这种形式了,下面我来给大家介绍一下CSS 类选择器与多类选择器的用法

    详解CSS3选择器的使用方法汇总

    一 通用选择器1 *{}通配选择符(CSS2):适合所有...CSS3新增的通用选择器:同级元素通用选择器:1 通用选择器E~F{}:匹配的是E元素之后的同级F元素匹配E后边所有的F,EF同级。只要F在E的后边,E只是作为一个参考。E~

    CSS的选择器内容文档

    CSS选择器的重点内容详解

    疯狂HTML 5+CSS 3+JavaScript讲义(第2版)+源代码

    6.5 CSS 3新增的伪类选择器 176 6.6 在脚本中修改显示样式 195 6.7 本章小结 197 第7章 字体与文本相关属性 198 7.1 字体相关属性 199 7.2 CSS 3支持的颜色表示方法 205 7.3 文本相关属性 206 7.4 CSS 3新增...

    css样式应用优先级实用PPT课件.pptx

    伪类选择器LVHA顺序从右至左覆盖。例如:a:link - 默认链接样式、a:visited - 已访问链接样式、a:hover - 鼠标悬停样式、a:active - 鼠标点击样式。 5. 元素(伪元素)选择器 元素选择器用于选择所有对应的HTML...

    详解CSS中的选择器优先级顺序

    CSS在使用选择器对元素施加属性的时候会有先后顺序,包括特殊性和重要性等概念在内,这里我们就来详解CSS中的选择器优先级顺序,需要的朋友可以参考下

    HTML+CSS零基础入门学习教程之类选择器详解基本使用

    除了使用标签来进行相同标签CSS选择外,还可以使用类选择器来选择。 类选择器前面使用符号. (1)基本使用 为了将类选择器的样式与元素关联,必须将 class 指定为一个适当的值。例如: This heading is very ...

    详解CSS中的选择器优先级及样式层叠问题解决

    新手的疑问大家经常在网页中看到类似 li#first 这样的选择器。很多新手疑问了?由于使用 id 就已经可以确定元素了,为什么前面还要加一个 li? 直接写上 #first 这样的 id 选择器就可以了。听起来说得不错,简单...

    CSS: hover选择器的使用详解

    之前在学计算机应用的时候,老师教我们使用了:hover选择器来完成下拉菜单,之前只知道怎么使用,并不知道为什么要这么用,现在记下怎么使用吧 定义和用法 定义: :hover 选择器用于选择鼠标指针浮动在上面的元素。 :...

Global site tag (gtag.js) - Google Analytics