Octopress的Figcaption的CSS样式差异
作者、编辑：糖果
新版的Octopress与旧版的的Figcaption的CSS样式差异，以下的CSS是被格式化之后的：
旧版的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| .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
}
|
新版的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
| .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标签
1
2
3
| <figure role='code'>
<pre></pre>
</figure>
|
新的：
表示figure 这个标签 下面属性class=“code”节点下面的 pre标签
1
2
3
| <figure class='code'>
<pre></pre>
</figure>
|
就是一个 根据 属性值 来选择。一个根据class 来选择
1
2
3
| 选择器 例子 例子描述 CSS
.class .intro 选择 class="intro" 的所有元素。 1
[attribute|=value] [lang|=en] 选择 lang 属性值以 "en" 开头的所有元素。 2
|
参考：CSS选择器
PS：请用于非商业用途。