一、CSS伪类：
CSS伪类用于为某些元素添加特别的效果。
二、CSS伪类的语法：
selector:pseudo-class {property: value}
selector.class:pseudo-class {property: value}
注意：CSS伪类和类的不同在于：
①伪类以:开头，类以.开头
②伪类不能用在HTML元素的class属性定义中，而类可以
三、Anchor伪类：
a:link {color: #FF0000} /* unvisited link */
a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
注意：a:hover必须在a:link和a:visited之后，而a:active必须在a:hover之后
四、CSS伪类总结：
CSS的类和伪类合用的情况，一般发生在需要对同一个HTML元素在不同行为或环境下设置不同的样式时使用。此时CSS的类可以设置该HTML元素的基本属性，而用伪类设置不同行为下的属性。
因为CSS的类只能定义静态的属性，对于需要根据HTML元素不同行为表现进行不同设置的情况，就只能用伪类了。在使用伪类后，我们可以在HTML元素定义中只指明class，而不需要指明伪类，因为浏览器会自动地识别并应用。
例：
<style type="text/css">
a:link { color: #FF0000 }
a:visited { color: #00FF00 }
a:hover { color: #FF00FF }
a:active { color: #0000FF }
</style>
<a href="default.asp" target="_blank">This is a link</a>
五、CSS伪元素：
CSS伪元素和伪类一样，都是为了给某些元素添加特别的效果。
六、CSS伪元素语法：
selector:pseudo-element {property: value}
selector.class:pseudo-element {property: value}
七、CSS伪元素-first-line和first-letter：
"first-line"伪元素用于为某个选择器的第一行文本添加特殊效果。例如：
p:first-line {color:#0000ff;font-variant:small-caps}
<p>Some text that ends up on two or more lines</p>
则显示的效果如下：
SOME TEXT THAT ENDS
up on two or more lines
"first-letter"伪元素用于伪选择器的第一个字符文本添加特殊效果。例如：
p:first-letter {color:#ff0000;font-size:xx-large}
<p>The first words of an article
</p>
则显示的效果如下：
The first words of an article...
和伪类一样，伪元素也可以和CSS的类搭配
p.article:first-letter {color:#ff0000}
<p class="article">A paragraph in an article</p>
我们还可以将多个伪元素结合起来一起使用。例如：
p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff}
<p>The first words of an article</p>
-------------------------------------------------------------
生活就像打牌，不是要抓一手好牌，而是要尽力打好一手烂牌。
posted on 2008-08-01 21:26
Paul Lin 阅读(322)
评论(0) 编辑 收藏 所属分类:
Web基础