XHTML规则
1、使用恰当的文档声明和命名空间
2、使用meta标签声明内容类型
3、属性值使用引号
4、为属性赋值
5、元素、属性小写
6、关闭标签
7、空标签使用空格斜杆结束
8、注释内容不要使用双下划线
9、确保小于号及和号是<、&
css选择器
id选择器不能以数字开头，因为mozilia/firefox不支持
css3选择器分类
基本选择器
元素选择器、id选择器、类选择器、通配选择器、群组选择器
层次选择器
| 后代选择器 | E F |
| 子代选择器 | E>F |
| 相邻兄弟选择器 |
E+F |
| 通用选择器 | E~F |
相邻兄弟选择器指的是匹配紧邻在后面的元素
通用选择器指的是匹配E元素后面的所有F元素
常见的伪类选择器
链接伪类选择器
:link 常用于链接锚点，匹配未被访问过的元素
:visited 常用于链接锚点，匹配已经被访问过了的元素
用户行为伪类选择器
:active 匹配被激活状态的元素
:hover 匹配处于悬浮状态的元素
:focus 匹配获取了焦点的元素
链接伪类选择器、用户行为伪类选择器统称动态伪类选择器
动态伪类有一个顺序问题（简记：LoVe HA）：https://blog.csdn.net/u013853928/article/details/52036825
目标选择器
:target 选择被相关url所指向的元素
结构伪类选择器
结构伪类名字看起来有点复杂，很多时候记得了，过一段时间又忘记了哪个跟哪个，但是最近我发现了一个在名字上的规律，把结构伪类归为一个组一个组地记，思绪撸清晰了许多。
| 第一组 | E:first-child E:nth-child(n) （n>=0） E:nth-child(odd) 奇数项 E:nth-child(even) 偶数项 E:last-child E:nth-last-child(n)（n>=1） E:nth-last-child(odd) 偶数项 E:nth-last-child(even) 奇数项 |
| 第二组（死磕到底，只为找到你） | E:first-of-type E:nth-of-type(n) （n>=0） E:last-of-type E:nth-last-of-type(n)（n>=1） |
| 第三组 | E:only-child E:only-of-type |
比如first-child、last-child、nth-child(n)这些可以归为一组记，E:first-child会匹配E元素的父元素里面的第一个E元素，需要注意的是，如果父元素里面的第一个子元素不是E元素，那么是不会匹配到的。同样的规则，来到E:last-child这里，它表示的是匹配E元素的父元素里面的最后一个E元素，如果父元素的最后一个子元素不是E元素，那么是不会匹配到的。同样的，在E:nth-child(n)这里，它表示的是匹配E元素的父元素里面的第n个E元素，如果父元素里面的第n个元素不是E元素，那么也是不会匹配到的。除了以上这三个，在这一组里还有一个E:nth-last-child，其实这个就很简单了，我们知道:last-child是从最后数到的第一个，那么:nth-last-child(n)就会是从最后面开始数起的第n个元素，但这里需要 注意的是，从头开始数的，n都是从0开始计数；从最后开始数的，n都是从1开始计数。除此之外，n就是n，字母不能用其他的来代替，比如不能写成E:nth-child(s)。n还可以是odd、even，我们都知道，odd表示的是奇数，even表示的是偶数。
<div class="box1">
<h2>:first-child选择器</h2>
<ul class="list1">
<li>1</li>
<li class="li2">2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<style>
.box1 li:first-child{
color: red;
}
</style>效果：
<div>
<h2>:first-child选择器</h2>
<p>
如果是.li2:first-child是不会匹配到的，因为.li2对应的元素不是其父元素的第一个子元素
</p>
<ul class="list1">
<li>1</li>
<li class="li2">2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<style>
.box1 .li2:first-child{
color: red;
}
</style>效果：
相信很多人也会像我一样，时常搞混第一组和第二组（分得清楚的就当这段不存在直接跳过吧），但是弄清楚了它们的真面目后，我们就不用害怕分不清楚它们谁是谁了。
再来到第二组这里，E:first-of-type匹配E元素的父元素里面的类型为E的第一个元素，E:first-of-type与E:first-child的区别在哪里呢，区别就在于，E:first-of-type表示在父元素里面，第一个子元素不是E类型的，没关系呀，继续往下找，直到找到一个是E类型的，而且是第一个。而E:first-child它只认第一个子元素，如果第一个子元素不是E类型，那么就不会继续往下找了。如果理解了E:first-of-type与E:first-child的区别，那么，顺理成章地，E:nth-of-type(n)与E:nth-child(n)、E:last-of-type与E:last-child、E:nth-last-of-type(n)与E:nth-last-child(n)的区别就容易了。
E:last-of-type表示匹配E元素的父元素里面的类型为E的最后一个元素。
E:nth-of-type(n)表示匹配E元素的父元素里面的类型为E的第n个元素。
E:nth-last-of-type(n)表示匹配E元素的父元素里面的类型为E的倒数第n个元素。
第三组，E:only-child指的是匹配E元素的父元素里面的唯一E元素，且E元素是父元素的唯一一个子元素，换句话，E是父元素的“独生子女”。E:only-of-type指的是匹配E元素的父元素里面的类型唯一的E元素，父元素不一定只有一个子元素，但是E类型的只能是一个。
除了以上的这些结构伪类选择器，其实还有如下几个
E:empty 表示匹配E的父元素里面的空元素，空元素表示的是没有嵌套任何标签和内容的标签
E:not(子元素F) 否定伪类选择器 匹配所有除子元素F外的所有E元素
E:root 匹配E元素所在文档根元素，html文档的根元素始终是html，所以也表示html
伪元素
E::first-line 匹配E元素的第一行
E::first-letter 匹配E元素的第一个字符
E::after 在E元素后面插入子元素，可用于清除浮动
（ps：清除浮动的原理可以看看这篇博文）
https://www.cnblogs.com/nxl0908/p/7245460.html
1、在父元素后面添加伪元素，实现清除浮动
<div class="wrap">
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box3"></div>
</div>
<style>
.box{width: 100px; height: 100px; float: left;}
.box1{background: red;}
.box2{background: blue;}
.wrap:after{
content: '';
height: 0;
visibility: hidden;
display: block;
clear: both;
}
.wrap{zoom:1}/*兼容ie*/
</style>
2、其他清除浮动的方法
（1）父元素设置高度
（2）父元素也清除浮动
（3）父元素创建BFC overflow: hidden
（4）结尾处添加标签，.box3{clear:both}E::before 在E元素前面插入子元素
属性选择器
element[attribulte="value"] 有某个属性值的element元素
element[attribulte~="value"] 包含某个单词的属性值的element元素
element[attribulte|="value"] 以某个单词开头的属性值的element元素
element[attribulte*="value"] 包含某部分字母的属性值的element元素
element[attribulte^="value"] 以...开头的属性值的element元素
element[attribulte$="value"] 以...结尾的属性值的element元素
background-position: x y
简写顺序：
background: color image repeat attachment position
文本对齐
text-align: center || left || right || justify 块级元素
vertical-align: middle 常用于设置块级元素对垂直居中，设置父元素display: table;子元素display: table-cell;vertical-align: middle;
文本缩进
text-indent 只对块级元素有效，行内元素无效，如果行内元素需要设置缩进，可以使用padding属性。
盒子模型
box-sizing: content-box（默认） || border-box （ie盒模型）
使用ie盒模型时，border、padding、width三者一起作为容器的宽度。
border-box这个用法很巧妙，在很多时候我们定死了容器的百分比宽度，抑或者长度值宽度吧，再设置边框、内边距后，很容易出现容器位置不够的情况，这时设置盒子模型为border-box就解决了问题，只是这种方法要牺牲一下实际的高、宽度大小。。
padding对行内元素有效，margin对行内元素无效。