一、伪类
分为两种，一种是UI伪类，另一种是结构化伪类
- UI伪类：当html元素处于某种状态时，比如鼠标指针悬停其上，才应用设定的css规则
- 结构化伪类：处于特定结构中，比如列表的最后一项，的html元素，才应用设定的css规则
UI伪类：
1. 链接伪类：共有四种，分别对应了链接的四种访问状态
| 链接状态 | 状态说明 | 示例代码 |
|---|---|---|
| link | 未被用户操作的原始状态 | a:link{color:black; } |
| visited | 用户点击过的链接 | a:visited{color:gray; } |
| hover | 用户鼠标悬停其上但并未点击 | a:hover{text-decoration:none; } |
| active | 用户正在点击，但是鼠标还未松开 | a:active{color:red; } |
需要注意的是，有些链接伪类并不是只能用于链接，比如，如果想要实现鼠标悬停在段落上时，段落背景变为灰色，可以用p:hover{background-color:gray; }实现。
2. :focus伪类
input:focus {border:1px solid yellow;}
上述代码会在光标在input字段中时，为该字段添加一个蓝色边框。这样可以让用户明确的知道输入的字符会出现在哪里。
3. :target伪类
当用户点击一个跳转到当前页面中其他元素的链接时，跳转到的元素即为目标元素，可以用：target构成的伪类选择器选中它，进行css样式的设定。
<a href="#more_info">More Information</a>
<h2 id="more_info">This is the information you are looking for.</h2>
#more_info:target {background:gray;} /*对链接的跳转目标设置样式*/
上述伪类选择器的作用是：对文字链接"More Information"的跳转目标，即id为more_info的<h2>标签，设置css样式，使其背景色变为灰色。
结构化伪类：
1. :first-child和:last-child
<ol class="results">
<li>FirstChild</li>
<li>Second</li>
<li>LastChild</li>
</ol>
对其应用伪类选择器：
ol.results li:first-child {color:blue;}
ol.results li:last-child {color:red;}
则，文本FirstChild变为蓝色，LastChild变为红色
2. :hth-child
使用 指定类型:nth-child(数字){属性名:属性值; }选择器来选取属于其父元素的特定类型的第 n 个亲子元素的所有元素，并应用声明的样式。
关于这个伪类，刚开始看w3school的文字解释没有看太明白，尤其是对其父元素这四个子的理解，但是结合着上面给出的示例代码，多试几次就清楚了。
<!DOCTYPE html>
<html>
<head>
<style>
p:nth-child(3){background:gray;}
li:nth-child(1){background:red; }
</style>
</head>
<body>
<p>测试1</p>
<article>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<ul>
<h3>标题</h3>
<li>内容1</li>
<li>内容2</li>
</ul>
<p>第四个段落。</p>
</article>
<p>注释：Internet Explorer 不支持 :nth-child() 选择器</p>
</body>
</html>
画出上述代码简单的DOM结构图：
据此图再去理解挺它的定义：
在父类body的亲子元素中，第三个child元素刚好就是<p>标签，由于伪类选择器p:nth-child(3){background:gray;}的作用，其包裹的文本注释：Internet Explorer 不支持 :nth-child() 选择器，会应用上设定的样式——填充灰色背景。
此外，父类article的亲子元素中的第三个child元素刚好也是<p>标签，所以其包裹的文本第三个段落。，也会应用上该样式。
然而，父类ul的第三个亲自元素不是<p>标签，故p:nth-child(3){background:gray;}不起作用，并且，父类ul的第一个亲子元素也不是<li>，故li:nth-child(1){background:red; }也没有起作用。
所以，使用指定类型:nth-child(数字){属性名:属性值; }此伪类选择器时，会对每一个父类的亲子元素进行筛选，选择数字符合以及类型符合的子元素，然后对其使用css样式。
其最终显示结果如下：
二、伪元素
伪元素，文档中若有实无的元素
1. ::first-letter伪元素
可以对首字母的样式进行调整，比如创建首字符放大效果
p::first-letter {font-size:300%;}
2. ::first-line伪元素
可以选中文本段落（一般情况下是段落）的第一行，并对其css样式进行设置，例如：
p::first-line {font-variant:small-caps;}
可以把第一行以小型大写字母显示，但是，需要注意的是，伪元素::first-line 所指的第一行元素的长度不是固定的，会随着浏览器窗口的宽度变化而变化。
3. ::befer和::after伪元素
用于在特定元素前面或者后面添加新的内容，比如
<p class="age">25</p>
对此标记添加如下样式
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
最终显示结果为：
Age: 25 years.
Reference
- 《css设计指南(第三版)》
- W3School在线测试工具 V2 http://www.w3school.com.cn/tiy/t.asp?f=css_sel_nth-child
- jQuery :nth-child() 选择器 | 菜鸟教程 http://www.runoob.com/jquery/sel-nthchild.html
401
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
