伪元素

伪元素，顾名思义，就是你根本没有在你的源代码中写这个元素，但是在运行的时候确出现的元素。

伪元素不是选择器。但是伪元素是和选择器连在一起的。

伪元素的形式如下：

selector:伪元素

伪类和伪元素的形式完全一样，只是它们表达的含义不同。

1.1、selector:before

在selector匹配到的HTML元素之前插入一个元素。

示例：

.welcome:before {
    content: "Hello ";
    color: red;
    text-size: 12px
}

1.2、selector:after

在selector匹配到的HTML元素之后插入一个元素。

示例：

.clear-float:after {
    display: block;
    clear: both;
    content:'';
}

1.3、selector:first-child

匹配selector匹配到的HTML元素的第一个子元素。

示例：

.panel-body:first-child {

}

1.4、selector:last-child

匹配selector匹配到的HTML元素的最后一个子元素。

示例：

.panel-body:last-child {

}

1.5、selector:first-line

匹配selector匹配到的HTML元素的第一行文本。

示例：

.panel-body > .h1 + p : first-line {
    backgroud-color : red;
}

1.6、selector:first-letter

匹配selector匹配到的HTML元素的第一个字母。

示例：

.panel-body > .h1 + p : first-letter {
    text-size : 30px;
}

1.7、selector:nth-child(n)

匹配selector匹配到的HTML元素的直接子元素。

n可以取下面的值：

整数，从1开始	表示第n个子元素
odd	表示第偶数个子元素
even	表示第奇数个子元素
带有n的表达式	比如2n+1

示例：

ul : nth-child(1) {
    color : write;
}
ul : nth-child(odd) {
    color : red;
}
ul : nth-child(even) {
    color : green;
}
ul : nth-child(3n) {
    color : black;
}

1.8、[selector]:target

匹配selector匹配到的HTML元素被激活为当前锚点的时候触发。如果没有指定selector，那么当前页面上的任何锚点被激活，都会触发。

IE9以下的IE浏览器不支持。

示例：

:target {
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

#posix:target {
    border: 2px solid #D4D4D4;
    background-color: #e5eecc;
}

1.9、[selector1]:not(selector2)

匹配selector1匹配到的HTML元素中排除了selector2匹配到的HTML元素中剩下的那些元素。

示例：

:not(p) {
    border:1px solid #ccc;
}