span:first-child 选择span元素的父元素中的第一个子元素,第一个子元素还必须得是span标签
span:last-child 选择span元素的父元素中的最后一个子元素,最后一个子元素还必须得是span标签
span:nth-child(n) 选择span元素的父元素中的第n个子元素,第n个子元素还必须得是span标签 注意是从前面开始查找
span:nth-last-child(n) 选择span元素的父元素中的第n个子元素,第n个子元素还必须得是span标签 注意是从后面开始查找
凡是涉及到n的操作,n的取值都可以从0开始,可以取0,1,2,3,4,5,6,7,8,9...
span:nth-child(2n) 原理同上,是取偶数行
span:nth-child(2n+1) 原理同上,是取奇数行
span:nth-child(even) 原理同上,是取偶数行
span:nth-child(odd) 原理同上,是取奇数行
在网页布局当中为了页面的稳定，美观，以及维护的方便，我们是将每一个标签都看成是一个盒子模型
所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
盒模型的组成：border + content + padding + margin
3.1盒子模型中的边框 border
border: border-width || border-style || border-color
border: 1px solid red; 最最常用的一种写法
3.2内填充padding
边框(border)和内容(content)之间的空间为内填充,也就是padding
padding的不同写法：
padding: 30px; 只有一个值的时候，表示四个方向都是同一个值
padding: 30px 70px; 两个值的时候，第一个值表示上下，第二个值表示右左。
padding: 20px 50px 80px 120px; 四个值的时候，表示上右下左。
3.3盒子面积的影响因素
当一个盒子的宽和高设置了之后，如果再加上border或是padding的话，会影响当前盒子原来的面积
如果想保持当前的面积不变的话，需要在内容的宽度上将多出来的值给减掉。
3.4外填充margin
边框border之外的空间,或是盒子与盒子之间的距离就是margin
margin的不同写法：
margin: 30px; 只有一个值的时候，表示四个方向都是同一个值
margin: 30px 70px; 两个值的时候，第一个值表示上下，第二个值表示右左。
margin: 20px 50px 80px; 三个值的时候，第一个值表示上，第二个值表示右左，第三个值表示下。
margin: 20px 50px 80px 120px; 四个值的时候，表示上右下左。
3.5使用margin设置外边距的时候带来的问题
1.相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）
解决的方式：尽量避免同时在上下两个盒子中都设置了margin-bottom和margin-top
2.父子元素共享margin的问题
当父元素嵌套了一个子元素的时候，如果子元素设置了一个margin-top，则父元素也会有margin-top样式
解决方案：
1.给父元素设置一个边框 border:1px solid red;
2.给父元素添加一个属性 overflow:hidden;
4.后代选择器
作用：先限定范围，然后再选择标签对象
从某个范围里面，选择其中的子元素
.box ul li 选择类名为box的元素下面的ul标签下面的所有的li标签
.demo .li2 选取类名为demo的元素下面的类名为li2的所有的标签
.demo li:nth-child(3) 选择类名为demo的元素下面的li标签中的第3个
浮动是用来解决块级元素在一行并列显示的问题，把要在一行显示的块行元素都设置一个属性float:left;
浮动会有贴靠现像，要浮动都浮动，要不浮动都不浮动。
浮动的元素，会盖住下面没有浮动的元素，因为浮动的元素漂起来，不浮动的元素钻到上面那个元素的底下去了。
box-sizing: border-box; --- content-box是默认的值，css2就一直遵循的这种标准。
7.小结
结构伪类:
:last-child
:nth-child
:nth-last-child
:target
盒子模型的组成：内容 + 内边距 + 外边距 + 边框
conent + padding + margin + border
浮动：是用来解决块级元素在一行显示的问题的。
float:left;
后代选择器： .box ul li
css3中的盒子模型： box-sizing: border-box 会让盒子进入内减模式
*{margin:0;padding:0} 清除标签的默认内外边距
去掉无序列表的小黑点： list-style:none;
Emmet语法补充
ul>li{这是第$个li标签}*6
<ul> <li>这是第1个li标签</li> <li>这是第2个li标签</li> <li>这是第3个li标签</li> <li>这是第4个li标签</li> <li>这是第5个li标签</li> <li>这是第6个li标签</li> </ul>
w100 h100
.box {
width: 100px;
height: 100px;
}