H5C3练习总结12.14（小米商城右侧悬浮菜单）--firstchild,定位，选择器

关于CSS的选择器:first-child和:last-child

(一)我遇到的问题：

在制作小米商城右侧悬浮菜单时，需要的成果图如左侧图，我做到的地方如右侧图：

可以看出我做的是每个盒子外边距等间距的，而需要的结果是最后一个盒子的上边距较大。

我需要对最后一个盒子进行样式调整。

我看到官方代码如下：

.sidebar ul li:last-child {
				margin-top: 20px;
			}

可是在下面的html代码中没有last-child这个类，所以就触及到我的知识盲区了

（二）:first-child和:last-child的知识点

:first-child和:last-child是伪类选择器

常用的伪类选择器有:first-child  :last-child  :nth-child  :nth-of-type

以:last-child为例

格式：name1 name2:last-child

意思是以name1为目标的最后一个name2标签的内容设置样式

上面代码为例的意思是：以ul为目标的最后一个li的内容设置样式，也就是最后一个小盒子特别的进行设置。

div div:last-child 意思是以div为目标的最后一个div的内容设置样式（div父div子）

div:last-child 意思是最后一个div标签的内容设置样式

div :last-child（中间有空格看见没有，很重要，区别很大！）意思是以div为目标的最后一个标签的内容设置样式（无所谓最后一个标签是什么，是p，span都行）

一定是父元素的最后一个子元素！！！如果只有一个div标签没有子元素，内容是不会生效的，但是，把内容放到div标签下再建一个子元素标签放内容，子元素的内容设置的样式是会生效的！意思就是：父元素里只有一个子元素:last-child是可以生效的，因为它是最后一个，但是必须有父子元素！

:first-child  :last-child这两个是类似的，举一反三即可。

生效的前提是必须确定是第一个子元素或者最后一个子元素哦！

关于定位

http://t.csdnimg.cn/4mLTC

去看这位博主写的，超级清楚！

关于选择器

对于选择器的书写今天又有了一点小的认识

			ul,
			p {
				margin: 0;
				padding: 0;
				list-style: none;
			}

.sidebar ul li:hover span,
			.sidebar ul li:hover p {
				color: hotpink;
			}

以上两种都是并集选择器，第一种是因为是标签选择器所以之间ul,p即可，第二种是类选择器所以上下两个都要加“.”

			.sidebar ul li {
				border-bottom: 1px solid #ddd;
				width: 85px;
				height: 85px;
				background-color: white;
				position: relative;

			}

			.sidebar ul li .wxin {
				width: 100px;
				height: 100px;
				background: #fff;
				position: absolute;
				top: 0;
				left: -130px;
				padding: 15px;
				display: none;
			}

以上两种都是后代选择器，第一种是ul和li是标签所以直接写，第二种.weixin是类选择器所以还是要按照类选择器来写

关于利用空标签来调整间距

就是很神奇的一个小点，没想到

我刚开始很奇怪它为什么设计一个空的span标签放在p标签上面，后面才知道它将span标签通过display属性变成了块标签，通过调整块标签的长宽来调整p的内容位于盒子中的位置。

各位优秀的读者们，我只是一个刚刚开始自学前端的一个新人，可能在你们看来这些东西很小儿科，但是也很感谢你们的阅读与评价，如果我有什么写得不对的地方，敬请纠正，也非常希望各位给我提出好的建议和更优秀的解决方式，我会坚持每天更新自己的学习心得的，谢谢各位阅读！