files/zh-cn/web/css/_colon_first/index.html


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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

---
title: ':first'
slug: 'Web/CSS/:first'
translation_of: 'Web/CSS/:first'
---
<div>{{CSSRef}}</div>

<h2 id="简介">简介</h2>

<p><code>:first</code> {{cssxref("@page")}} <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">伪类选择器</a> 描述的是：打印文档的时候，第一页的样式。</p>

<div class="note"><strong>提示:</strong>你不能改变所有的css属性. 你只能改变 margins、 orphans、 widows、文档什么时候换页。别的所有css样式都会被忽略。</div>

<h2 id="语法">语法</h2>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Example" name="Example">示例</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;First Page.&lt;/p&gt;
&lt;p&gt;Second Page.&lt;/p&gt;
&lt;button&gt;Print!&lt;/button&gt;
</pre>

<h3 id="CSS">CSS</h3>

<pre class="brush: css">@page :first {
  margin-left: 50%;
  margin-top: 50%;
}

p {
  page-break-after: always;
}
</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">document.querySelector("button").onclick = function(){ window.print() }
</pre>

<h3 id="结果">结果</h3>

<p>点击下面的 print 按钮来打印这个例子。第一页的文字会在中间显示， 其他页的内容在默认位置显示。</p>

<p>{{ EmbedLiveSample('Example', '80%', '150px') }}</p>

<div class="note"><strong>提示：</strong>在定义margin的时候，你可以只用绝对长度单位， 点击 <a href="/en-US/docs/Web/CSS/length#Absolute_length_units">length</a> 查看更多内容。</div>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">备注</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS3 Paged Media', '#left-right-first', ':first')}}</td>
   <td>{{Spec2('CSS3 Paged Media')}}</td>
   <td>无更改</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'page.html#page-selectors', ':first')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>首次定义</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容性">浏览器兼容性</h2>

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>特性</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>基础支持</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>8.0</td>
   <td>9.2</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>基础支持</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="sect1"> </h2>

<h2 id="参见">参见</h2>

<ul>
 <li>{{Cssxref("@page")}}</li>
 <li>{{Cssxref(":left")}}</li>
 <li>{{Cssxref(":right")}}</li>
</ul>