CSS3
选择器
<style type="text/css">
div {
color: black;

}

.a1 {
color: #0000FF;
}

#aa {
color: greenyellow !important;
}

/* 属性选择器*/
(具有class属性) div[class=a1] {}

input[type="text"] {}

input[type="text"]:focus~span {
display: none;
}
</style>
<div class="a1" id="aa" style="color: red;">111</div>
<input type="text" name="" id="" value="" />
<span>消失测试</span>

/* 伪类选择器 */
:focus 获取焦点时;
:checked 选中时;
:hover 鼠标滑动时;
:first-child 第一个子元素;
:last-child 最后一个子元素;
:nth-child(N) 选择第N个子元素 (odd)选择奇数 (even)选择偶数;
:nth-of-type(n) 选择第N个元素;

/* 关系选择器 */
(鼠标滑过E元素，让E1元素发生样式改变
E:hover空格E1 {}
(E1是E的后代);

E:hover+E1 {}
（E1是E的下一个相邻兄弟）;

E:hover~E1 {}
(E1是E的下N个兄弟）;

/* 伪元素选择器 （特点双冒号） */

不常用 :：first-letter 选择首字符 （中文，数字，英文）;

:：first-line 选择首行;

:：selection 选择选中的文本;

重要;
属于行内元素;
必须存在content属性;
不能添加hover效果，但是可以被hover;

div:hover::before {
color: yellow
}

;
主要用于清除浮动和做一些小图标;

::before 本意:在。。。。之前;

::after 本意:在。。。。之后;

清除浮动;

.clearfix::after {
content: "";
清除左右浮动 clear:both； 将元素转换为块级元素 display: block;
}