子代選擇器-以嵌套u(yù)l為例，給第一層的li加邊框

子代選擇器：選擇相鄰的后代，能減少代碼重復(fù)，用>符號連接。

/* 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>進(jìn)口原版</li>
          <li>少兒</li>
          <li>雜志</li>
        </ul>
      </li>
      <li>
        <div class="cat-name">免費(fèi)閱讀軟件</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; 
}

列表相關(guān)的為類選擇器(以上面的嵌套列表為例)

first-child /* 選擇父元素的第一個節(jié)點(diǎn)*/
last-child /* 選擇父元素的最后一個節(jié)點(diǎn)*/
nth-child(even) /* 先擇父元素的偶數(shù)節(jié)點(diǎn)*/
nth-child(odd) /* 選擇父元素的奇數(shù)節(jié)點(diǎn)*/

• 清除浮動的兩種方式

/* 第一種:分別在html和css中加clearfix*/
html：
在添加浮動的父節(jié)點(diǎn)的class里加clearfix
css:
.clearfix:after {
  content: '';
  display: block;
  clear: both;

/* 第二種：直接在css寫clearfix*/
.clearfix:after {
  content: '';
  display: block;
  clear: both;

添加浮動的父節(jié)點(diǎn):after {
  content: '';
  display: block;
  clear: both;

}

• 樣式一樣內(nèi)容不一樣使用列表（ul）表示,復(fù)雜的使用嵌套列表。
• CSS實(shí)現(xiàn)起裝飾作用的分隔線

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的最后一個節(jié)點(diǎn)右邊框

.cat-pane ul ul li:last-child {
  border-right: 0;
}

• 用first-child偽類選擇器給嵌套列表第二層li的第一個節(jié)點(diǎn)設(shè)置顏色

.cat-pane ul ul li:first-child {
  color: #00f;
}

• 用nth-child(even)偽類選擇器給嵌套列表第二層li的偶數(shù)節(jié)點(diǎn)設(shè)置字體大小

.cat-pane ul ul li:nth-child(even) {
  font-size: 30px;
}

使用背景圖制作圖標(biāo)

• CSS Sprites:用一張圖做圖標(biāo)，節(jié)省內(nèi)存和帶寬

.tools .icon {
  background: url(https://img.alicdn.com/tfs/TB1tyFSXm_I8KJjy0FoXXaFnVXa-48-1194.png) no-repeat 0 0; /* 首先設(shè)置背景圖片，no-repeat，正確的位置*/
  background-size: 24px auto;
}  /* 然后設(shè)置正確的圖片大小*/

• 不同的圖標(biāo)位置不同，只需要設(shè)置正確的background-position，如:

.tools .game .icon {
  background-position: 0 -220px;
}

• CSS Sprites生成工具
  網(wǎng)址：http://www.cssportal.com/
  生成步驟：
  1.找到[CSS Generators]中的[CSS Sprite Generator];
  2.上傳需要合成的圖標(biāo)；
  3.下載CSS Sprites使用。

iconfont

• 一種圖標(biāo)技術(shù)，同樣可以節(jié)省內(nèi)存和帶寬，還可以對圖標(biāo)進(jìn)行大?。ú粫д妫?、顏色等設(shè)置。
• 使用步驟：
  1.進(jìn)入http://www.iconfont.cn網(wǎng)站；
  2，將需要的圖標(biāo)加入購物車，添加至項(xiàng)目，命名，點(diǎn)擊確定，生成項(xiàng)目和代碼；
  
  1.png

2.png

3.png

4.png

• 使用Unicode或Font class樣式做圖標(biāo)

/* 使用Unicode樣式*/
/* 第一步：將項(xiàng)目下面生成的font-face復(fù)制到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;}
/* 第三步：復(fù)制相應(yīng)圖標(biāo)并獲取字體編碼到html中*/
<i class="iconfont">&#xe6e2;</i>

/* 使用Font class樣式*/
/* 第一步：復(fù)制項(xiàng)目下面生成的fontclass代碼到html中*/
<link rel="stylesheet" >
/* 第二步：復(fù)制相應(yīng)圖標(biāo)并獲取字體編碼到html中*/
<i class="iconfont icon-addpeople"></i>

注意

• 找真實(shí)的案例練習(xí)
• css放到獨(dú)立的文件中，分離css和html
• 多練習(xí)，多模仿怎么把案列寫成html
• 使用英文命名，不用拼音命名

問題

1.子代選擇器只有在嵌套列表才能使用嗎？
2.理解了盒模型，但是平時對怎么設(shè)置margin、padding這些還是不熟悉，都是靠感覺來。