作者、编辑：糖果

新版的Octopress与旧版的的Figcaption的CSS样式差异，以下的CSS是被格式化之后的：

旧版的

.code-title,html .gist .gist-file .gist-meta a[href*='#file'],h3.filename,figure[role=code] figcaption {
    text-align: center;
    font-size: 13px;
    line-height: 2em;
    text-shadow: #cbcccc 0 1px 0;
    color: #474747;
    font-weight: normal;
    margin-bottom: 0;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;

    -o-border-top-left-radius: 5px;
    -ms-border-top-left-radius: 5px;
    -khtml-border-top-left-radius: 5px;

    border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    -o-border-top-right-radius: 5px;
    -ms-border-top-right-radius: 5px;
    -khtml-border-top-right-radius: 5px;

    border-top-right-radius: 5px;
    font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;
    background: #aaa url('../images/code_bg.png') top repeat-x;<del></del> 
    border: 1px solid #565656;
    border-top-color: #cbcbcb;
    border-left-color: #a5a5a5;
    border-right-color: #a5a5a5;
    border-bottom: 0
}

新版的

.code-title,html .gist .gist-file .gist-meta a[href*='#file'],h3.filename,figure.code figcaption {
    text-align: center;
    font-size: 13px;
    line-height: 2em;
    text-shadow: #cbcccc 0 1px 0;
    color: #474747;
    font-weight: normal;
    margin-bottom: 0;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-left-radius: 5px;
    border-top-left-radius: 5px;
    -moz-border-radius-topright: 5px;
    -webkit-border-top-right-radius: 5px;
    border-top-right-radius: 5px;
    font-family: "Helvetica Neue", Arial, "Lucida Grande", "Lucida Sans Unicode", Lucida, sans-serif;
    background: #aaa url('images/code_bg.png') top repeat-x;
    border: 1px solid #565656;
    border-top-color: #cbcbcb;
    border-left-color: #a5a5a5;
    border-right-color: #a5a5a5;
    border-bottom: 0
}

@mind-or的解答时：

旧的：
表示figure 这个标签 下面属性 role=‘code’ 节点下面的 pre标签

<figure role='code'>
  <pre></pre>
</figure>

新的：

表示figure 这个标签 下面属性class=“code”节点下面的 pre标签

<figure class='code'>
  <pre></pre>
</figure>

就是一个 根据 属性值 来选择。一个根据class 来选择

选择器                例子                例子描述                                   CSS
.class                .intro              选择 class="intro" 的所有元素。	     1
[attribute|=value]    [lang|=en]          选择 lang 属性值以 "en" 开头的所有元素。   2

参考：CSS选择器

PS：请用于非商业用途。