【2018/03/30更新】我居然不知道CSS的这两个用法，今天看到，惭愧至极
-
div > p
选择div下一级的所有p元素。他与div p的区别是，前者只选择下一级元素，后者则选择div下所有子元素中为p元素的标签。 -
p + span
选择紧随p元素的span元素，p与span是同级关系。
# 前言：
你的代码中是否每个标签都定义了一个类？完成一个页面后是否觉得代码很乱很拥挤？看见github优秀代码清爽简洁，想过你真的精通 ‘CSS’ 吗？想要进阶？不妨捡起CSS最容易被新手忽视与遗漏的模块：伪类 & 伪元素
CSS伪类[Pseudo-classes]，用于向某些选择器提供特殊效果。
# 语法
伪类的语法：selector:pseudo-class {property:value;}
配合css类使用: selector.class:pseudo-class {property:value;}
# 锚[anchor]伪类 - 链接
链接有不同的状态，为了区分和提高用户体验，可以利用css伪类对链接不同状态显示不同的样式
a:link { color: #ff0000; } /* 未访问的链接 */
a:focus { color: #00ff00; } /* 获得焦点的链接 */
a:visited { color: #0000ff; } /* 已访问的链接 */
a:hover { color: #ff00ff; } /* 鼠标划过链接 */
a:active { color: #ffcc00; } /* 点击时的链接 */
需要特别注意的是：
- 在css定义中，
a:hover是必须定义在a:link和a:visited之后才能生效【如果有】； -
a:active必须定义在a:hover之后才能生效【如果有】； - 伪类名称对大小写不敏感，大小写均生效。
# 伪类配合css类使用
伪类不仅能跟在一个标签名后面，也能跟在样式类的后面。
<style type="text/css">
a.linkme:visited { color: #ff0000; }
</style>
<a class="linkme" href="css-syntax.html">css 语法</a>
# [CSS2] :first-child伪类
在理解这个伪类的时候，走了不少误区，为了方便大家理解和自己回顾时更迅速捡起来，如下举例说明
假设有如下html：
1. <div>
2. <p>I am the first element</p>
3. <ul>
4. <li>I am the first li emelent</li>
5. <li>some text <strong>here</strong> </li>
6. <li>go on</li>
7. </ul>
8. <p><em>who</em> know what I am</p>
9. </div>
【分析】上面的例子中，能够作为 first-child 的元素有 行2 的p元素，行4 的li元素， 行5 的 strong元素， 行8 的em元素；
如果给定以下规则：
p:first-child {
color: red;
}
li:first-child {
font-weight: bold;
}
则，行2 的p元素的文案颜色将改成红色，行4 的li元素文案将被加粗。
【误区】认为p:first-child{ color:red; } 会将p元素的第一个子元素文案置红，其实不然。要明白，伪类都是对选择器自身进行加工。
【要点】必须声明 <!DOCTYPE>， 才能使 :first-child 在 IE 中生效。
【联想】学 :first-child 必定要想到 :nth-child(an+b) ；注意区分，:nth-child(1) 是用于对父元素的子元素索引进行查找，具体见后面 :nth-child(an+b) 模块
【经典案例】
1. 匹配 第一个 <p> 元素
该用例中，选择器匹配作为任何元素的第一个子元素的<p>元素
p:first-child {
color: red;
}
2. 匹配所有 <p> 元素中的第一个 <i> 元素
p > i:first-child {
color: blue;
}
3. 匹配所有作为第一个子元素的 <p> 元素中的所有 <i> 元素
p:first-child i {
color: lightgreen;
}
注意第二个例子的特殊用法。
# [CSS2] :last-child伪类
1. 匹配父元素中最后一个子元素<p>
p:last-child {
color: aqua;
}
【提示】p:last-child 等同于 p:nth-last-child(1)
# [CSS3] :nth-child(an+b) 伪类 - 难点
【功能】选择每个指定元素匹配父元素中的第an+b个子元素，根据子元素索引选择，具有bool结果性质，如果匹配不上则样式表就不执行
p:nth-child(2) {
color: azure;
}
【分析】对于该点「菜鸟教程」的部分解读有误，正确意思是：在 <p>元素所在的父元素的第二个子元素，如果是<p>元素，则加上样式内容，如果不是<p>元素，则跳过。
【经典案例】
1. 匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1）
p:nth-child(odd){
background: aliceblue;
}
p:nth-child(even){
background: antiquewhite;
}
2. 匹配下标是 3 的倍数的所有 p 元素
p:nth-child(3){
background: aquamarine;
}
# [CSS3] :nth-of-type(an+b) 伪类 - 难点
【功能】匹配指定元素所在父元素中相同类型的第n个同级兄弟元素，根据类型选择，同样具有bool结果性质
p:nth-of-type(2) {
background: beige;
}
【分析】W3C的解释还是很费解，"属于其父元素的第二个 p 元素的每个 p "；我理解是：在<p>元素所在的不为<p>的父元素中，查找第二个<p>元素并为它加上样式表，且只作用于p内的行内元素中
【特殊案例】为什么我觉得W3C的解释不太合理，注意如下这种情况：
<div>
<p>line-1</p>
<p>line-2<span>line-2-1</span>
<P>line-2-2</P>
<P>line-2-3</P>
<div>line-2-4</div>
</p>
<div>line-3
<p>line-3-1</p>
<p>line-3-2</p>
<p>line-3-3</p>
</div>
<p>line-4</p>
</div>
// css code
p:nth-of-type(2) {
color:blueviolet;
}
来看看效果;
关于该例，仁者见仁，智者见智，只要能正确理解并应用，一切你开心就好。
# [CSS3] :nth-last-child(an+b) 伪类
【功能】匹配指定元素的倒数第an+b个子元素
【案例】设置倒数第一个子元素的样式，比如去除底部边框
p:nth-last-child(1) {
border-bottom: none;
}
# [CSS3] :nth-last-of-type() 伪类
【案例】指定每个p元素匹配同类型中的倒数第2个同级兄弟元素背景色：
p:nth-last-of-type(2) {
background:#ff0000;
}
# [CSS3] :not(seletor) 伪类
【功能】匹配所有不是指定标签的元素
【案例】设置不是p标签的元素的背景颜色
:not(p) {
background-color: cadetblue;
}
# [CSS3] :empty 伪类
【功能】匹配所有没有子元素的指定元素
【案例】设置所有没有子元素的<p>元素的背景颜色为bisque
p:empty {
background-color: bisque;
}
# [CSS2] :lang 伪类
【功能】匹配带有指定 lang 属性开始的元素
以下案例会给声明了 lang 属性且值为 no 的<q>元素内容前后增加～符号。
q:lang(no) {
quotes: "~" "~";
}
// html
<p>前面的文字 <q lang="no"> 段落中引用的文字</q></p>
CSS伪元素[Pseudo-elements]，用于向某些选择器提供特殊效果
# 语法
伪元素的语法：seletor:pseudo-element { property: value; }
配合CSS类使用： selector.class:pseudo-element { property:value; }
# [CSS1] :first-line 伪元素
【功能】用于向文本的首行设置特殊样式
【经典案例】
p:first-line {
color: #ff0000;
font-variant: small-caps; // 把文本设置成小型(文字比普通字体小)的大写字体，可选值：normal/small-caps/inherit
}
【要点】:first-line只能用于块级元素如<p>，<span>和<font>就不能用
【注释】以下属性能应用于 :first-line：font/ color/ background/ word-space/ letter-spacing/ text-decoration/ vertical-align/ text-transform/ line-height/ clear(用于清除浮动)
# [CSS1] :first-letter 伪元素
【功能】用于向文本的首个字母添加特殊样式
p:first-letter {
color: #00ff00;
font-size: xx-large; // 还有这个值？见下方【拓展】
}
【要点】:first-letter也只能用于块级元素如<p>，<span>和<font>就不能用
【注释】还有以下属性能应用与:first-letter: font/ color/ background/ margin/ padding/ border/ text-decoration/ vertical-align(仅float为none时)/ text-transform/ line-height/ float/ clear(用于清除浮动)
【拓展】font-size 的多种可能值
- <绝对大小>有：
xx-small | x-small | small | medium | large | x-large | xx-large - <相对大小>有：
larger | smaller相对于父元素 - <长度> 如：16px;
- <百分比> 如：100%; 相对于父元素
# [CSS2] :before 伪元素
【功能】 :before 伪元素可以在元素的内容前面插入新内容
【案例】在<p>标签前面插入文字。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。
p:before {
content: '今日新闻：'
background-color: chocolate;
}
如果想在元素上增加块，设置content为空，并增加样式即可，例如制作loading效果时即可使用该方法。
# [CSS2] :after 伪元素
【功能】:after 伪元素可以在元素的内容之后插入新内容
【案例】下面的例子在每个 <h1> 元素后面插入一幅图片，与:before 一致，这个伪元素也是行内元素
h1:after {
content:url(logo.gif);
}
# 后语
本文尽可能列出了平时用到的所有伪类和伪元素，当然还有一些小众伪类并未给予说明，遇不到，还难记，不如写个简单的类实现。另外，如果本文有写的不对的地方，欢迎大家指正交流。
