聊天总结出伪类一些用法
作者:腰子2008年8月6日下午QQ群里问的一些问题，和一些解决的方法，有些平时经常用，却根本没怎么注意过，今天算好好学习了下。总结出伪类平时没怎么注意的用法和各个浏览器识别伪类不同的之处：
一、各浏览器支持伪类程度
（这些只是大体了解一点点，其他注意的待续）
IE6只支持链接伪类。也就是常用 .ooxx a:hover {} 这种带 a链接的伪类。
IE7+版本所有标签都可以:hover
FF也支持
今天的问题总结就是老蛇同学说的那句话。（我相当囧。。讨论了一个多小时。。）
℡ SNAKE /yy 16:46:59
没有链接你定义了半天链接……然后说没有效果……
℡ SNAKE /yy 16:47:05
二、伪类分析研究
很简单的一个列子：
.ooxxoo a:link { color: #000000;}
.ooxxoo a:visited {color: #000000;}
.ooxxoo a:hover {color: #FFFFFF;}
.ooxxoo a:active {color: #FFFFFF;}
这是个很普通的伪类例子。而今天的问题就是书写顺序颠倒。造成链接点击一次后，不能在正常应用样式。当时我把hover写在了visied的前面。例子：
.ooxxoo a:link { color: #000000;}
.ooxxoo a:hover {color: #FFFFFF;} *
.ooxxoo a:visited {color: #000000;} *
.ooxxoo a:active {color: #FFFFFF;}
第一次在没有点击连接的时候各种样式正常，但点过一次后，你在去触发链接，hover没有效果。第二次触发链接的时候按理说是会显示白色。可是却还是显示黑色。。原因就是颠倒了顺序，可乐推荐的记忆链接顺序方法。（我没感觉哪里好记
）。。。。
这个是a下面分属性的记忆
L link
V visited
H hover
A active
======================
伪类的2种用法。我就常用最简单的那种，另外的那种方法真没用过。。写出来今天也刚学的知识点。
普通的伪类：
.ooxxoo a:link {}
.ooxxoo a:visited {}
.ooxxoo a:hover {}
.ooxxoo a:active {}
这个用法就是 <a class="ooxxoo" href="#"></a> a 链接引用了class 名为ooxxoo的样式。ooxxoo这个样式包含a链接。
第二种用法的伪类：
a.ooxxoo:link {}
a.ooxxoo:visited {}
a.ooxxoo:hover {}
a.ooxxoo:active {}
这个用法就是 <a class="ooxxoo" href="#"></a> a 链接定义了一个class 名为ooxxoo的样式。a 链接包含 ooxxoo这个样式。如果没看懂。。看第3个例子，估计就明白了。
第三种其实原理一样就是稍微复杂了点
h3.ooxxoo a:link {}
h3.ooxxoo a:visited {}
h3.ooxxoo a:hover {}
h3.ooxxoo a:active {}
<h3 class="ooxxoo "><a href="#"></a></h3> h3标签包含一个叫ooxxoo的样式。他作用与h3标签的A链接样式。也就是：
.ooxxoo {} = h3.ooxxoo {} 效果一样，只是前者其他也可以引用，后者只能h3引用而已。
补充伪类的几个重要用法。
#dd .ee {}这2个样式在一起写的话，必须加空格，不加就是语法错误。
#div li .divline { }
#div li.divline { }
这两个语法是对的，但是指定的东西不一样。
#div li .divline { }
ID为div的元素下面的，LI元素下面的，CLASS为divline 的元素。
#div li.divline { }
ID为div的元素下面的，LI的CLASS为divline 的元素。
例子：
#div li .divline { }
<ul id="div">
<li>
<div class="divline"></div>
</li>
</ul>
#div li.divline { }
<ul id="div">
<li class="divline "></li>
</ul>
PS;我描述半天看的懂没？下面是聊天记录里引出上面这些遇到的问题，有兴趣可以看看聊天记录。（很长）
===========================
08年8月6号 下午
===========================
里面涉及到4个人：
Ding就是腰子我
℡ SNAKE /yy15 是老蛇
逍遥老鬼 就是老鬼
可乐★ 就是可乐
===========================
Ding 15:53:38
我突然遇到一个问题。。
Ding 15:53:45
关于链接的。。
℡ SNAKE /yy15:53:47
啥问题
℡ SNAKE /yy 15:54:02
请讲
℡ SNAKE /yy 15:54:13
我特爱帮助人
℡ SNAKE /yy 15:54:18
我很闲
逍遥老鬼 15:54:26
……
Ding 15:54:45
link 是橙色
hover 是蓝色
visited 是橙色
问题来了，我点以下链接后，在触发，不会是hover的蓝色。。而是死的橙色
Ding 15:54:46
为什么？
Ding 15:56:31
这问题我表述的不够明确么
℡ SNAKE /yy 16:04:39
按顺序写
℡ SNAKE /yy 16:04:42
LVHA
可乐★ 16:04:50
love and hate
可乐★ 16:04:56
我昨天都告诉他了
Ding 16:05:03
lvea ？
可乐★ 16:06:19
LoVe and HAte
这个是a下面分属性的记忆
L link
V visited
H hover
A active
℡ SNAKE /yy 16:06:57
念就是Love HA?
可乐★ 16:07:08
lvha不是个单子
℡ SNAKE /yy 16:07:09
有个域名：www.lavaha.com
可乐★ 16:07:11
单词
可乐★ 16:07:30
你注册的那个
Ding 16:08:24
。。。很强大。。长见识了。。。我确实写颠倒了
Ding 16:08:34
我把V写在L后面
逍遥老鬼 16:08:56
顺序？
逍遥老鬼 16:09:01
没有顺序吧
℡ SNAKE /yy 16:09:06
有
逍遥老鬼 16:09:26
我记得伪类不用按顺序写吧
可乐★ 16:09:31
必须
逍遥老鬼 16:09:36
不过我就写两个
可乐★ 16:09:41
lvha的顺序
逍遥老鬼 16:09:56
就v跟h的
逍遥老鬼 16:10:28
都啥作用说说
逍遥老鬼 16:10:35
我还分不清呢
℡ SNAKE /yy 16:10:56
打开你的CSS宝典
Ding 16:11:25
这个我的记下。。真很注意这个
逍遥老鬼 16:11:29
看不懂啊
℡ SNAKE /yy 16:11:35
貌似没讲这个
逍遥老鬼 16:11:51
讲了
逍遥老鬼 16:11:55
但是不清楚
逍遥老鬼 16:12:03
不知道具体作用
Ding 16:12:21
link 当前状态
visited 触发后的状态
hover 划过状态
aXXXX 点击状态
℡ SNAKE /yy16:12:28
http://hi.baidu.com/51site/blog/item/4eb1eb1715f44e044a90a7af.html
℡ SNAKE /yy 16:13:05
爷们有钱了买身志愿者的T恤
Ding 16:13:10
.accordion h3 {
background: url(images/arrow-square.gif) no-repeat right -51px;
padDing : 7px 15px;
margin: 0;
cursor: pointer;
font-size: 12px;
font-weight: bold;
color: #0066aa;
}
.accordion h3:link {
color: #0066aa;
}
.accordion h3:visited {
color: #0066aa;
}
.accordion h3:hover {
color: #ec781a;
}
.accordion h3.active {
background-position: right 5px;
}
℡ SNAKE /yy 16:13:18
对了
Ding 16:13:25
这个代码你说触发后会显示什么颜色
℡ SNAKE /yy 16:13:28
accordion h3.active
℡ SNAKE /yy 16:14:02
目测，应该是#0066aa
Ding 16:14:07
触发以后居然在划过居然还是原始的颜色
Ding 16:14:33
对确实是0066aa 可是我在触发的时候没有反应了为什么？
Ding 16:14:51
IE 6 里没反应，其他 浏览器正常
℡ SNAKE /yy 16:14:52
你写错了
℡ SNAKE /yy 16:14:55
accordion h3.active
℡ SNAKE /yy 16:14:57
是冒号
Ding 16:15:06
。。。
℡ SNAKE /yy 16:15:17
这么写也不对
℡ SNAKE /yy 16:15:34
加空格
℡ SNAKE /yy 16:15:47
.accordion h3 :visited 『』
Ding 16:15:59
不对。
℡ SNAKE /yy 16:16:14
.accordion h3 a:visited {}
℡ SNAKE /yy 16:16:23
这样就完美了
可乐★ 16:16:55
没变化似乎
Ding 16:17:11
.accordion h3.active
你感觉这是不是一个样式，而不是链接的样式。
℡ SNAKE /yy 16:18:24
.accordion h3.active
你这么写就说明H3有一个名为“ACTIVE”的CLASS
℡ SNAKE /yy 16:19:04
<h3 class="active"></h3>
Ding 16:19:26
对，那后面那句是什么意思？同作用么？
Ding 16:19:42
郁闷没有那个样式的
Ding 16:19:50
不知道这咋写的。。
℡ SNAKE /yy 16:19:54
后面那句就是你写的那个CSS定义的HTML
℡ SNAKE /yy 16:20:08
伪类这样写
逍遥老鬼 16:20:13
冒汗
逍遥老鬼 16:20:17
号
Ding 16:20:50
.accordion h3 {
background: url(images/arrow-square.gif) no-repeat right -51px;
padDing : 7px 15px;
margin: 0;
cursor: pointer;
font-size: 12px;
font-weight: bold;
color: #0066aa;
}
.accordion h3 a:link {
color: #0066aa;
}
.accordion h3 a:visited {
color: #0066aa;
}
.accordion h3 a:hover {
color: #ec781a;
}
.accordion h3 a:active {
color: #0066aa;
}
Ding 16:21:03
这样点击后，在划过还是没颜色我疯了。。
Ding 16:21:11
哪里错了么？
℡ SNAKE /yy 16:21:17
<style type="text/css" media="screen">
<!--
a.link:link {}
a.link:visited {}
a.link:hover {}
a.link:active {}
-->
</style>
<a class="link" href="#"></a>
℡ SNAKE /yy 16:21:31
这是定义这个链接
Ding 16:21:51
日，a.link:hover还可以这么写？
Ding 16:22:03
效果和link a:hover一样么？
℡ SNAKE /yy 16:22:27
<style type="text/css" media="screen">
<!--
h3.link a:link {}
h3.link a:visited {}
h3.link a:hover {}
h3.link a:active {}
-->
</style>
<h3 class="link"><a href="#"></a></h3>
℡ SNAKE /yy 16:22:40
不一样
Ding 16:22:47
。。何解？
℡ SNAKE /yy 16:22:48
这是定义H3下面的链接
℡ SNAKE /yy 16:23:09
你看第一个例子，A是有CLASS的，他的CLASSNAME是LINK
Ding 16:24:12
a.link:hover {}
link a:hover {}
效果一样把？
℡ SNAKE /yy 16:24:15
a.link:link
分开解释就是：链接（A）类名为（LINK）的链接样式
℡ SNAKE /yy 16:24:32
不一样
℡ SNAKE /yy 16:24:35
第一个挨着呢，没有空格
Ding 16:24:52
。。我有点蒙了。。
℡ SNAKE /yy 16:25:08
link a:hover {}
的意思是link下面的链接的hover的样式
Ding 16:25:17
恩这个知道
℡ SNAKE /yy 16:25:21
当然灭有link这个标签
Ding 16:25:38
是个伪类
逍遥老鬼 16:25:40
…
逍遥老鬼 16:25:47
明白了点
逍遥老鬼 16:25:54
顺序不一样
℡ SNAKE /yy 16:25:59
.link a:hover {}
逍遥老鬼 16:26:04
包含关系不一样
℡ SNAKE /yy 16:26:07
对
Ding 16:26:26
。。继续讲。。
Ding 16:26:39
.link a:hover这个我懂。
逍遥老鬼 16:26:43
没了
逍遥老鬼 16:26:54
就这问题
Ding 16:26:57
a.link:link
Ding 16:27:07
这算啥？
逍遥老鬼 16:27:19
一个是a这个标签里面的
℡ SNAKE /yy 16:27:25
意思就是一个CLASS为LINK的链接的样式
Ding 16:27:34
a.link:link
分开解释就是：链接（A）类名为（LINK）的链接样式
℡ SNAKE /yy 16:27:40
你看第一个例子HTML
逍遥老鬼 16:27:40
一个是link这个类小号标签的
Ding 16:27:52
<style type="text/css" media="screen">
<!--
a.link:link {}
a.link:visited {}
a.link:hover {}
a.link:active {}
-->
</style>
<a class="link" href="#"></a>
逍遥老鬼 16:27:53
恩
℡ SNAKE /yy 16:27:55
爷们名字起的不好
逍遥老鬼 16:27:58
不一样
逍遥老鬼 16:28:07
不是不好
逍遥老鬼 16:28:19
是没仔细看
℡ SNAKE /yy 16:28:52
<style type="text/css" media="screen">
<!--
a.snake:link {}
a.snake:visited {}
a.snake:hover {}
a.snake:active {}
-->
</style>
<a class="snake" href="#"></a>
℡ SNAKE /yy 16:28:57
<style type="text/css" media="screen">
<!--
a#snake:link {}
a#snake:visited {}
a#snake:hover {}
a#snake:active {}
-->
</style>
<a id="snake" href="#"></a>
℡ SNAKE /yy 16:29:11
看明白点了不
Ding 16:29:22
这个写法。？
Ding 16:29:47
#snake 这个样式，，在A下面？
℡ SNAKE /yy 16:29:59
第一个是类（CLASS）所以用“.”；
第二个是ID（ID），所以用“#”。
℡ SNAKE /yy 16:30:28
a#snake {}
你认识这个标签不
Ding 16:30:36
。。。不认识。。。
逍遥老鬼 16:30:40
为啥class用点id用#
Ding 16:30:40
我没遇见过那样的
逍遥老鬼 16:30:54
最基础的东西
Ding 逍遥老鬼 16:31:15
几种写法你还没看呢
℡ SNAKE /yy 16:31:17
<h2 class="Ding "></h2>
你写一个CSS，定义这个标签，
Ding 16:31:16
有吗？我记得伪类 是#snake a:hover的
可乐★ 16:31:26
回家卖冰棍吧，地球不适合你
逍遥老鬼 16:31:31
恩
℡ SNAKE /yy 16:31:39
不要属性
Ding 16:31:51
.Ding {}
℡ SNAKE /yy 16:31:54
对了
℡ SNAKE /yy 16:32:11
.Ding {} = h1.Ding {}
Ding 16:32:13
那你的a.XX {}这是什么写法？
℡ SNAKE /yy 16:32:15
明白
Ding 16:32:22
我日。。
Ding 16:32:31
这也行。
℡ SNAKE /yy 16:32:41
同样的道理
℡ SNAKE /yy 16:32:50
a.snake {}
逍遥老鬼 16:32:56
你明明写的h2
℡ SNAKE /yy 16:32:58
你能理解啥意思吧？
Ding 16:33:02
懂了。。
逍遥老鬼 16:33:18
后面说h1
Ding 16:33:27
a链接下的全用snake 样式
℡ SNAKE /yy 16:33:27
爷们写错了
Ding 16:33:36
我看到了，，理解了
逍遥老鬼 16:33:41
你本来就写错了
Ding 16:33:54
刚确实不理解为什么A.XXX {}
逍遥老鬼 16:34:05
你这老师误认子弟啊
Ding 16:34:16
对了。。这样写有什么优势么?
℡ SNAKE /yy 16:34:21
<style type="text/css" media="screen">
<!--
h2.Ding { font-weight: 700; }
a.Ding { font-weight: 400; }
-->
</style>
<h2 class="Ding "></h2>
<a class="Ding " href="#"></a>
℡ SNAKE /yy 16:34:51
这么写你应该就能理解了
逍遥老鬼 16:34:54
为了区分不同情况
Ding 16:35:38
相当了解。。
逍遥老鬼 16:35:59
学不少东西
℡ SNAKE /yy 16:36:04
a#snake:link {}
这么写你也理解了吧？
逍遥老鬼 16:36:08
去整理下
Ding 16:36:34
理解。。a链接下的snake..起始状态
℡ SNAKE /yy 16:36:50
对头～
逍遥老鬼 16:37:10
link这个不定意也可以啊
Ding 16:37:12
。。问题来了，这跟。#snake a:link 一样。。。
逍遥老鬼 16:37:23
不对啊
Ding 16:37:26
咋不对？
逍遥老鬼 16:37:30
你还是不懂
℡ SNAKE /yy 16:37:39
Ding 16:37:56
擦，是不是的需要引用ID
逍遥老鬼 16:38:03
这里的snak可以定意在别的标签
Ding 16:38:14
这确实
℡ SNAKE /yy 16:38:24
#snake a:link 这么写是定义#snake 下面的链接
Ding 16:38:42
。。恍然大雾
℡ SNAKE /yy 16:38:43
a#snake:link 这么写是定义ID为SNAKE的链接
Ding 16:38:50
a#snake:link {} 是定义所有A
℡ SNAKE /yy 16:39:04
是定义所有ID等于SNAKE的A
逍遥老鬼 16:39:13
刚才例子是h2下面的a，h2类是
Ding 16:39:12
确实。。确实
Ding 16:39:29
。。我刚例子是什么来着。。
逍遥老鬼 16:39:40
翻回去看
Ding 16:39:44
.accordion h3 {
background: url(images/arrow-square.gif) no-repeat right -51px;
padDing : 7px 15px;
margin: 0;
cursor: pointer;
font-size: 12px;
font-weight: bold;
color: #0066aa;
}
.accordion h3 a:link {
color: #0066aa;
}
.accordion h3 a:visited {
color: #0066aa;
}
.accordion h3 a:hover {
color: #ec781a;
}
.accordion h3 a:active {
color: #0066aa;
}
Ding 16:39:52
触发不好用。。
逍遥老鬼 16:39:54
看不懂
℡ SNAKE /yy 16:40:11
你现在这么写应该没有问题了
Ding 16:40:36
.accordion h3 {
background: url(images/arrow-square.gif) no-repeat right -51px;
padDing : 7px 15px;
margin: 0;
cursor: pointer;
font-size: 12px;
font-weight: bold;
color: #一;
}
.accordion h3 a:link {
color: #一;
}
.accordion h3 a:visited {
color: #一;
}
.accordion h3 a:hover {
color: #二;
}
.accordion h3 a:active {
color: #二;
}
℡ SNAKE /yy 16:41:02
.accordion h3 a:hover {
color: #ec781a;
}
.accordion h3 a:active {
color: #0066aa;
}
Ding 16:41:07
点过一次以后，在hover理论上是二把。可是还是显示一。IE 6
℡ SNAKE /yy 16:41:25
爷们给你写例子.....
Ding 16:41:35
。。。
逍遥老鬼 16:41:38
……
Ding 16:42:03
这问貌似不是刚才那个。。
逍遥老鬼 16:42:11
不知道
逍遥老鬼 16:42:25
我手机看记录看不全
逍遥老鬼 16:42:36
一直不明白你们说什么呢
Ding 16:43:08
说刚才我发这个例子。。为什么点击以后 在hover以下，没有hover的颜色。是link的颜色
℡ SNAKE /yy 16:43:15
<style type="text/css" media="screen">
<!--
a.snake:link { color: red; }
a.snake:visited { color: red; }
a.snake:hover { color: blue; }
a.snake:active { color: blue; }
-->
</style>
<a href="#" class="snake">SNAKE</a>
Ding 16:43:59
a 链接下，class=“snake”
℡ SNAKE /yy 16:44:29
<style type="text/css" media="screen">
<!--
.accordion h3 {
background: url(images/arrow-square.gif) no-repeat right -51px;
padDing : 7px 15px;
margin: 0;
cursor: pointer;
font-size: 12px;
font-weight: bold;
color: #0066aa;
}
.accordion h3 a:link {
color: #0066aa;
}
.accordion h3 a:visited {
color: #0066aa;
}
.accordion h3 a:hover {
color: #ec781a;
}
.accordion h3 a:active {
color: #0066aa;
}
-->
</style>
<div class="accordion">
<h3><a href="#" class="snake">SNAKE</a></h3>
</div>
℡ SNAKE /yy 16:45:02
你本地测试一下
*********************聊天关键地方
Ding 16:45:36
我错了。。。我居然没有<a href="#" class="snake">SNAKE</a> 这句。。
℡ SNAKE /yy 16:45:53
class="snake"可以不要，我忘记去掉了
Ding 16:46:08
我明白你意思。。我牙根没加a
℡ SNAKE /yy 16:46:18
根本就没有链接？
Ding 16:46:23
<h3>XX国内版（中国）</h3>
Ding 16:46:27
= =
℡ SNAKE /yy 16:46:31
Ding 16:46:30
我突然想到了。。
℡ SNAKE /yy 16:46:59
没有链接你定义了半天链接……然后说没有效果……
℡ SNAKE /yy 16:47:05
Ding 16:47:11
。。。。。
℡ SNAKE /yy 16:47:10
这么简单的问题
Ding 16:47:14
我错了。。。
℡ SNAKE /yy 16:47:51
鄙视
Ding 16:47:53
我确实学到了知识了。。就是你刚才的。。那个a.laoshe:hover
℡ SNAKE /yy 16:48:07
以后你就能用到了
逍遥老鬼 16:48:24
你真牛……
Ding 16:48:29
焕然大雾啊
Ding 16:48:31
恍然大悟
Ding 16:49:29
真有意思，我没写h3里的A链接，IE 7 FF都能正常显示。。链接状态
IE 6不显示。。
Ding 16:49:38
IE 6很严格啊
℡ SNAKE /yy 16:51:08
IE6只支持链接伪类
Ding 16:51:24
晓得了。
℡ SNAKE /yy 16:51:31
IE7+版本所有标签都可以:hover
℡ SNAKE /yy 17:00:22
蛋疼，菊花痒。
Ding 17:00:28
.....
逍遥老鬼 17:01:38
你是庤疮
℡ SNAKE /yy 17:01:59
我？痔疮？笑话！哈哈哈！
逍遥老鬼 17:02:17
看来说对了
逍遥老鬼 17:02:23
这么大反应
℡ SNAKE /yy 17:02:34
低调……
Ding 17:02:38
- 相关文章:
CSS书写顺序和一些解决问题的方法 (2008-8-4 23:1:25)
发表评论
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。