CSS伪类
用于向某些选择器添加特殊的效果，描述元素的特殊状态。伪类一般情况以：开头。
比如：第一个子元素、被点击的元素、鼠标移入的元素
语法：selector : pseudo-class {property: value}
CSS 类也可与伪类搭配使用。
selector.class : pseudo-class {property: value}
1、锚伪类
在支持 CSS 的浏览器中，链接的不同状态都可以不同的方式显示。
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移入状态 */
a:active {color: #0000FF} /* 选定的链接 */由于隐私的原因，visited这个伪类只能修改链接的颜色。link和visited是超链接专属，其他两个伪类所有元素都可以。lovehate顺序
2、伪类与 CSS 类
a.red : visited {color: #FF0000}3、:first-child伪类
:first-child 伪类来选择元素的第一个子元素。
:last-child伪类来选择元素的最后一个子元素。
:nth-child()伪类来选择元素的第n个子元素,特殊值，，n表示选中所有，2n或者even表示选中偶数位的元素，2n+1或者odd表示选中奇数位的元素。
扩展：:first-of-type、:last-of-type、:nth-of-type()和上述伪类功能相似，不同点是他们是在同类型元素中进行排序；而上述伪类是在所有元素中排序。
<div>
<p>These are the necessary steps:</p>
<ul>
<li>Intert Key</li>
<li>Turn key <strong>clockwise</strong></li>
<li>Push accelerator</li>
</ul>
<p>Do <em>not</em> push the brake at the same time as the accelerator.</p>
</div>作为第一个元素的元素包括第一个 p、第一个 li 和 strong 和 em 元素。
<html>
<head>
<style type="text/css">
p:first-child i {
color:blue;
}
</style>
</head>
<body>
<p>some <i>text</i>. some <i>text</i>.</p> ##选择第一个子元素为p的元素，然后选取该p元素中所有的i元素。
<p>some <i>text</i>. some <i>text</i>.</p>
</body>
</html>注释： 必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。
4、:lang伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。
<html>
<head>
<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>lang 类为带有值为 “no” 的 lang 属性的 q 元素定义引号的类型.
5、:not()伪类
将符合条件的从选择器中去除
伪元素
表示页面中一些特殊的并不真实存在的元素（特殊的位置）
1、first-line
“first-line” 伪元素用于向文本的首行设置特殊样式。
p::first-line
{
color:#ff0000;
font-variant:small-caps;
}
#对 p 元素的第一行文本进行格式化注释：“first-line” 伪元素只能用于块级元素。
2、first-letter
“first-letter” 伪元素用于向文本的首字母设置特殊样式：
p::first-letter
{
color:#ff0000;
font-size:xx-large;
}3、伪元素和CSS类
p.article:first-letter
{
color: #FF0000;
}
#使所有 class 为 article 的段落的首字母变为红色。4、::before、::after
“:before” 伪元素可以在元素的内容前面插入新内容。而且无法被选中，因为是通过css添加上的
“:after” 伪元素可以在元素的内容后面插入新内容。
h1:before
{
content:url(logo.gif);
}
#在每个 <h1> 元素前面插入一幅图片：
h1:after
{
content:url(logo.gif);
}
#在每个 <h1> 元素后面插入一幅图片：5、::selection
设置选中样式，表示选中的内容
扫一扫
1023
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
