子代选择器-以嵌套ul为例，给第一层的li加边框
子代选择器：选择相邻的后代，能减少代码重复，用>符号连接。
/* html-body 部分 */
<div class="cat-pane">
<div class="body">
<ul>
<li>
<div class="cat-name">电子书阅读器</div>
<ul>
<li>Kindle</li>
<li>Kindle X</li>
<li>咪咕</li>
<li>Kindle Paperwhite</li>
</ul>
</li>
<li>
<div class="cat-name">Kindle电子书</div>
<ul>
<li>排行榜</li>
<li>特价书</li>
<li>小说</li>
<li>进口原版</li>
<li>少儿</li>
<li>杂志</li>
</ul>
</li>
<li>
<div class="cat-name">免费阅读软件</div>
<ul>
<li>安卓版</li>
<li>iPhone版</li>
<li>iPad版</li>
<li>Mac版</li>
</ul>
</li>
</ul>
</div>
</div>
/* css */
.cat-pane .body > ul>li { /* 选择cat-pane里面的body的直接ul直接li */
border: 1px solid red;
}
/* 或者*/
.cat-pane .body>ul>li {
border: 1px solid red;
}
列表相关的为类选择器(以上面的嵌套列表为例)
first-child /* 选择父元素的第一个节点*/
last-child /* 选择父元素的最后一个节点*/
nth-child(even) /* 先择父元素的偶数节点*/
nth-child(odd) /* 选择父元素的奇数节点*/
- 清除浮动的两种方式
/* 第一种:分别在html和css中加clearfix*/
html：
在添加浮动的父节点的class里加clearfix
css:
.clearfix:after {
content: '';
display: block;
clear: both;
/* 第二种：直接在css写clearfix*/
.clearfix:after {
content: '';
display: block;
clear: both;
添加浮动的父节点:after {
content: '';
display: block;
clear: both;
}
- 样式一样内容不一样使用列表（ul）表示,复杂的使用嵌套列表。
- CSS实现起装饰作用的分隔线
border-top: 1px solid gray; /* 加1px灰色上边框*/
border-bottom: 1px solid gray; /* 加1px灰色下边框*/
border-left: 1px solid gray; /* 加1px灰色左边框*/
border-right: 1px solid gray; /* 加1px灰色又边框*/
- 用last-child伪类选择器去掉嵌套列表第二层li的最后一个节点右边框
.cat-pane ul ul li:last-child {
border-right: 0;
}
- 用first-child伪类选择器给嵌套列表第二层li的第一个节点设置颜色
.cat-pane ul ul li:first-child {
color: #00f;
}
- 用nth-child(even)伪类选择器给嵌套列表第二层li的偶数节点设置字体大小
.cat-pane ul ul li:nth-child(even) {
font-size: 30px;
}
使用背景图制作图标
- CSS Sprites:用一张图做图标，节省内存和带宽
.tools .icon {
background: url(https://img.alicdn.com/tfs/TB1tyFSXm_I8KJjy0FoXXaFnVXa-48-1194.png) no-repeat 0 0; /* 首先设置背景图片，no-repeat，正确的位置*/
background-size: 24px auto;
} /* 然后设置正确的图片大小*/
- 不同的图标位置不同，只需要设置正确的background-position，如:
.tools .game .icon {
background-position: 0 -220px;
}
- CSS Sprites生成工具
网址：http://www.cssportal.com/
生成步骤：
1.找到[CSS Generators]中的[CSS Sprite Generator];
2.上传需要合成的图标；
3.下载CSS Sprites使用。
iconfont
- 一种图标技术，同样可以节省内存和带宽，还可以对图标进行大小（不会失真）、颜色等设置。
- 使用步骤：
1.进入http://www.iconfont.cn网站；
2，将需要的图标加入购物车，添加至项目，命名，点击确定，生成项目和代码；
1.png
2.png
3.png
4.png
- 使用Unicode或Font class样式做图标
/* 使用Unicode样式*/
/* 第一步：将项目下面生成的font-face复制到css文件中*/
@font-face {
font-family: 'iconfont'; /* project id 622526 */
src: url('//at.alicdn.com/t/font_622526_pl532mc0sgmeipb9.eot');
src: url('//at.alicdn.com/t/font_622526_pl532mc0sgmeipb9.eot?#iefix') format('embedded-opentype'),
url('//at.alicdn.com/t/font_622526_pl532mc0sgmeipb9.woff') format('woff'),
url('//at.alicdn.com/t/font_622526_pl532mc0sgmeipb9.ttf') format('truetype'),
url('//at.alicdn.com/t/font_622526_pl532mc0sgmeipb9.svg#iconfont') format('svg');
}
/* 第二步：在css文件中定义使用iconfont的样式*/
.iconfont{
font-family:"iconfont" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
/* 第三步：复制相应图标并获取字体编码到html中*/
<i class="iconfont"></i>
/* 使用Font class样式*/
/* 第一步：复制项目下面生成的fontclass代码到html中*/
<link rel="stylesheet" href="//at.alicdn.com/t/font_622526_0y55plehxuxo5hfr.css">
/* 第二步：复制相应图标并获取字体编码到html中*/
<i class="iconfont icon-addpeople"></i>
注意
- 找真实的案例练习
- css放到独立的文件中，分离css和html
- 多练习，多模仿怎么把案列写成html
- 使用英文命名，不用拼音命名
问题
1.子代选择器只有在嵌套列表才能使用吗？
2.理解了盒模型，但是平时对怎么设置margin、padding这些还是不熟悉，都是靠感觉来。
