【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类使用

伪类不仅能跟在一个标签名后面，也能跟在样式类的后面。

a.linkme:visited { color: #ff0000; }

css 语法

# [CSS2] :first-child伪类

在理解这个伪类的时候，走了不少误区，为了方便大家理解和自己回顾时更迅速捡起来，如下举例说明

假设有如下html：

1.

【分析】上面的例子中，能够作为 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元素的第一个子元素文案置红，其实不然。要明白，伪类都是对选择器自身进行加工。

【要点】必须声明 ， 才能使 :first-child 在 IE 中生效。

【联想】学 :first-child 必定要想到 :nth-child(an+b) ；注意区分，:nth-child(1) 是用于对父元素的子元素索引进行查找，具体见后面 :nth-child(an+b) 模块

【经典案例】

1. 匹配 第一个

元素

该用例中，选择器匹配作为任何元素的第一个子元素的

元素

p:first-child {

color: red;

}

2. 匹配所有

元素中的第一个 元素

p > i:first-child {

color: blue;

}

3. 匹配所有作为第一个子元素的

元素中的所有 元素

p:first-child i {

color: lightgreen;

}

注意第二个例子的特殊用法。

# [CSS2] :last-child伪类

1. 匹配父元素中最后一个子元素

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;

}

【分析】对于该点「菜鸟教程」的部分解读有误，正确意思是：在

元素所在的父元素的第二个子元素，如果是

元素，则加上样式内容，如果不是

元素，则跳过。

【经典案例】

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内的行内元素中

【特殊案例】为什么我觉得W3C的解释不太合理，注意如下这种情况：

// css code

p:nth-of-type(2) {

color:blueviolet;

}

来看看效果;

p:nth-of-type(2)的执行结果

关于该例，仁者见仁，智者见智，只要能正确理解并应用，一切你开心就好。

# [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 伪类

【功能】匹配所有没有子元素的指定元素

【案例】设置所有没有子元素的

元素的背景颜色为bisque

p:empty {

background-color: bisque;

}

# [CSS2] :lang 伪类

【功能】匹配带有指定 lang 属性开始的元素

以下案例会给声明了 lang 属性且值为 no 的元素内容前后增加～符号。

q:lang(no) {

quotes: "~" "~";

}

// html

前面的文字 段落中引用的文字

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只能用于块级元素如

，和就不能用

【注释】以下属性能应用于 :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也只能用于块级元素如

，和就不能用

【注释】还有以下属性能应用与: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 伪元素可以在元素的内容前面插入新内容

【案例】在

标签前面插入文字。默认地，这个伪元素是行内元素，不过可以使用属性 display 改变这一点。

p:before {

content: '今日新闻：'

background-color: chocolate;

}

如果想在元素上增加块，设置content为空，并增加样式即可，例如制作loading效果时即可使用该方法。

# [CSS2] :after 伪元素

【功能】:after 伪元素可以在元素的内容之后插入新内容

【案例】下面的例子在每个

元素后面插入一幅图片，与:before 一致，这个伪元素也是行内元素

h1:after {

content:url(logo.gif);

}

# 后语

本文尽可能列出了平时用到的所有伪类和伪元素，当然还有一些小众伪类并未给予说明，遇不到，还难记，不如写个简单的类实现。另外，如果本文有写的不对的地方，欢迎大家指正交流。