选择器
参考W3C手册：http://www.w3school.com.cn/cssref/css_selectors.asp
css选择器分为简单选择器，伪元素选择器和组合选择器。
简单选择器又分为：标签选择器（元素选择器），类选择器，ID选择器，通配符选择器，属性选择器和伪类选择器。
css中权重最高的样式为：行内样式(除了 !important)，其次是ID选择器，权重处于第三的是类、伪类和属性选择器，权重较低的是标签选择器和伪元素选择器。
选择器：
// 简单选择器 *{...} // 通配符选择器，一般用来设置全局统一的样式 body html div ul ... // 标签选择器（元素选择器），会统一修改该层级以及该层级以下的所有相同的元素 .box //类名选择器 input[type="search"] // 属性选择器 .box:hover // 伪类选择器 #father // ID选择器 // 伪元素选择器 .box::after // 伪元素选择器 // 组合选择器 #father>div // 选择父元素id是father 的所有div元素 （只选择一代） #value,.text // 同时选择了id是value的元素 和 类名是text的元素 .class1.class2 { color: blue; } // 没有空格，是选择到同时拥有.class1和.class2的节点 <span class="class1 class2"></span> .father .class2 // 选择父元素father 下的所有叫class2的后代元素 （空格是后代选择器的标识符） span+p // 选中 span 元素后面紧挨着的第一个 p 兄弟元素 span~p // 选中 span 元素后面所有的 p 兄弟元素
...
伪类选择器：（选择器 后面接 一个 冒号 的是伪类）
伪类其实是弥补了CSS选择器的不足，用来更方便地获取信息。
dom:
<div id="father">
<div class="box"></div>
<p></p>
</div>
css:
.box:hover
.box:first-letter //向文本的第一个字母添加特殊样式 css1 .box:first-line //向文本的首行添加特殊样式 css1 .box:first-child //#father 下的第一个 class叫box的元素 css2 p:last-child //选择属于其父元素最后一个子元素每个 <p> 元素。 css3 p:only-child //选择属于其父元素的唯一子元素的每个 <p> 元素。 css3 p:first-of-type // 选择属于其父元素的首个 <p> 元素的每个 <p> 元素。 css3 .box:nth-child(odd) // 等同于 nth-child(2n+1) 奇数行 .box:nth-child(even) // 等同于 nth-child(2n) 偶数行 .box:not(p):not(span) // 所有class = box 的元素，除了 <p></p> 和 <span></span> 元素之外，设置样式
...//更多请参考第一行的链接
伪元素选择器：（选择器 后面接 两个 冒号 的是伪元素选择器）
而伪元素本质上是创建了一个虚拟容器(元素)，我们可以在其中添加内容或样式。
ul::-webkit-scrollbar{...} //设置滚动条的样式
...
:before, :after 和其它伪元素添加
div:nth-of-type(2)::before{ /*必须添加content属性，否则后期不可见*/ content: ""; // 毕传属性，不然不能显示 /*默认是行级元素，如果想设置宽高，就必须转换为块级元素*/ position: absolute; width: 20px; height: 20px; border-radius: 10px; left: -10px; top: -10px; } div:nth-of-type(2)::after{ /*必须添加content属性，否则后期不可见*/ content: ""; /*默认是行级元素，如果想设置宽高，就必须转换为块级元素*/ position: absolute; width: 20px; height: 20px; border-radius: 10px; left: -10px; bottom: -10px; } /*获取第一个字符：实现首字下沉*/ p::first-letter{ color: red; font-size: 30px; float: left;/*文本环绕*/ } /*获取第一行内容:如果设置了::first-letter,那么无法同时设置它的样式*/ p::first-line{ text-decoration: underline; } /*设置当前选中内容的样式*/ p::selection{ color: red; /*它只能设置显示的样式，而不能设置内容大小*/ /*font-size: 30px;*/ }
在CSS中总有一些你不用不知道，用到才知道的“坑”。比如今天要谈的，把 before, after 伪类用在 <img> 标签上。
嗯，实际上你用你会发现，在大多数浏览器这是无效的，dom中并不会出现你想要的结果。
为什么会这样呢？让我们回归到 W3C 标准中寻觅一下，在标准中，before, after 伪类的定义如：
As their names indicate, the :before and :after pseudo-elements specify the location of content before and after an element's document tree content.
来自 https://www.w3.org/TR/CSS21/generate.html#before-after-content
我们应该注意到所谓 document tree content，对于 img 这种自闭和标签，似乎不存在 content （内容或后代元素）在标签中，所以选择器没有生效。但这样的解释还不够清晰，实际上标准中还有一行注释：
Note. This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
嗯，这回清楚了，对于可替换元素（如 img、input、select 等），标准并没有清晰定义，这也导致了浏览器实现的差异性。
