CSS2伪类选择器要点

有四个选择器,分别是

hover:鼠标悬停

link:链接不能使用时

visited:链接被点击后

active:链接被点击时,如果鼠标不放,就会一直触发active属性

link在w3c中记录为链接未被点击时,实际上是当href属性不能使用时触发,列如<a href="#">南达科他级</a>

此时会激活link属性

如果某一个标签需要同时使用上面的多个伪类选择器,要想全部激活是有顺序关系的

link  visited  hover  active  ,建议按照这个排列方式书写

爱恨分明原则: l v h a

注释:为了产生预期的效果,在 CSS 定义中,a:hover 必须位于 a:link 和 a:visited 之后 !

注释:为了产生预期的效果,在 CSS 定义中,a:active 必须位于 a:hover 之后!!

注释:Pseudo-class(伪类)的名称对大小写不敏感。

注释:伪类可与 CSS 类配合使用:

a.red:visited {color: #FF0000;}

<a class="red" href="css_syntax.asp">CSS Syntax</a>

如果上面这个例子中的链接已访问过,那么它会显示为红色。

时间: 2024-11-03 14:35:52

CSS2伪类选择器要点的相关文章

关于伪类选择器中一个冒号和两个冒号的区别

在平时工作中用到伪类选择器的时候一个冒号和两个冒号貌似都是可以的,所以两者到底有什么区别呢,我们先来看下W3C关于CSS3选择器的规范中有一段描述: A pseudo-element is made of two colons (::) followed by the name of the pseudo-element. This :: notation is introduced by the current document in order to establish a discrimi

CSS动态伪类选择器温故-3

动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器(4)UI伪类选择器(5)结构伪类选择器(6)否定伪类选择器注:和其它CSS选择器的区别-伪类选择器都以冒号[:]开头 思考问题?(1)CSS3伪类选择器有什么功能?(2)选定元素能带来什么便利? 1.1.动态伪类选择器语法动态伪类包含两种:(1)在链接中常看到的锚点伪类(2)为用户行为伪类 (3)锚

伪类选择器和伪元素

伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#ff0000;text-decoration:none} a:visited{color:#00ff00;text-decoration:none} a:hover{color:#ff00ff;text-decoration:underline} a:link{color:#0000ff;text-decoration:underline} 在支出CSS的浏览器中,链接的不同状态都可以以不同的方式显示

CSS3 选择器——伪类选择器

前面花了两节内容分别在<CSS3选择器--基本选择器>和<CSS3选择器--属性选择器>介绍了CSS3选择器中的基本选择器和属性选择器使用方法,今天要和大家一起学习CSS3选择器中的第三部分,也是最后一部分--伪类选择器.伪类选择器对于大家来说最熟悉的莫过于:link,:focus,:hover之类的了,因为这些在平时中是常用到的伪类选择器,那么先和大家一起简单总结一下CSS中常用的伪类选择器的使用方法,最后把重心放到CSS3新增加的":nth-child"选择

CSS3 结构性伪类选择器(2)

CSS3 结构性伪类选择器-first-child ":first-child"选择器表示的是选择父元素的第一个子元素的元素E.简单点理解就是选择元素中的第一个子元素,记住是子元素,而不是后代元素. 示例演示 通过":first-child"选择器定位列表中的第一个列表项,并将序列号颜色变为红色. HTML代码: <ol> <li><a href="##">Link1</a></li>

CSS3的状态伪类选择器

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>CSS3的状态伪类选择器</title> 6 <style type="text/css"> 7 :enabled{ 8 background-color: blue; 9 }; 10 :disabled{

CSS3新增加的伪类选择器

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS3新增加的伪类选择器</title>    <style type="text/css">    /*root所有的元素*/        :root{            color: pink;      

背景图+列表+伪类选择器

Background-color|image|position|repeat 颜色图片位置重复 图片优先 CSS Sprites雪碧图:减少http请求,减小服务器压力.一张大图,通过背景偏移position截取小图. Li列表 list-style list-style-image list-style-position list-style-type <a>标签伪类选择器 link 未访问 visited 已访问 hover 悬停 可用于其他元素 active 点击 可用于其他元素

伪类选择器 E:nth-child(n)、E:nth-of-type(n)

结构伪类是css3新增的类型选择器. E:nth-child(n).E:nth-of-type(n)就是其中之二.搞懂了这两个,基本上跟他俩一家的其他几个兄弟伙基本上也可以弄懂了. 首先先用文字语言来描述一下这俩:      E:nth-child(n): 选择父元素下的第n个子元素,并且这第n个子元素的类型为E,    还是语言描述了之后用例子比较好       上面这个例子很简单,来简单分析一下样式表中的span:nth-child(2)这条语句(实际写代码不会这么随便啦,这里只是为了说明问