path: root/files/zh-cn/web/css/_doublecolon_first-line/index.html

---
title: '::first-line (:first-line)'
slug: 'Web/CSS/::first-line'
translation_of: 'Web/CSS/::first-line'
---
<p>{{ CSSRef() }}</p>

<p id="描述"><strong><code>::first-line</code></strong> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements">pseudo-element</a> （CSS伪元素）在某 <a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">block-level element</a> （块级元素）的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。</p>

<p>和其他所有的 伪元素一样，::first-line 不能匹配任何真实存在的html元素。</p>

<p> ::first-line 伪元素只能在块容器中,所以,<code>::first-line伪元素</code>只能在一个display值为block, <code>inline-block</code>, <code>table-cell</code> 或者 <code>table-caption中有用</code>.。在其他的类型中，<code>::first-line</code> 是不起作用的.</p>

<p> </p>

<h2 id="允许的属性值">允许的属性值</h2>

<p> </p>

<p>在一个使用了 <code>::first-line 伪元素的选择器中，</code>只有很小的一部分css属性能被使用：</p>

<ul>
 <li>所有和字体有关的属性：{{Cssxref("font")}}, {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}}, and {{Cssxref("font-family")}}</li>
 <li> {{cssxref("color")}}</li>
 <li>所有和背景有关的属性： {{Cssxref("background-color")}}, {{cssxref("background-clip")}}, {{Cssxref("background-image")}}, {{cssxref("background-origin")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, {{cssxref("background-size")}},  {{Cssxref("background-attachment")}}, and {{cssxref("background-blend-mode")}}</li>
 <li> {{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}}, and {{cssxref("line-height")}}</li>
 <li> {{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, and {{cssxref("vertical-align")}}.</li>
</ul>

<p>这个列表将来可能会被扩展，但是推荐的是，你不要使用任何上述没有提到的属性。</p>

<div class="note">
<p>在CSS 2中，伪元素是以 : 开头的。由于伪类也遵循同一规则，使得他们之间难以区分。为了解决这个问题，在CSS 2.1中，伪元素支持以 :: 开头。现在，使用伪元素时更推荐以 :: 开头，而使用伪类时使用 : 开头。</p>

<p>因为过去的浏览器都实现过CSS 2的规则，所以现在那些支持 :: 的浏览器通常同时也支持 : 的形式。</p>

<p>如果需要支持老旧的浏览器，那么<code>:first-line</code> 是唯一的选择，反之，更推荐使用<code>::first-line。</code></p>
</div>

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

{{csssyntax}}

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

<h3 id="text-transform">text-transform</h3>

<p>将每个段落中的第一行字母转换成大写</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore.&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css"><code>p::first-line { text-transform: uppercase }</code></pre>

<h4 id="输出">输出</h4>

<p>{{ EmbedLiveSample('text-transform', 250, 100) }}</p>

<h3 id="margin-left">margin-left</h3>

<p><code>margin-left</code> 在 first-line 伪元素上无效</p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore.&lt;/p&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css"><code>p::first-line { margin-left: 20px }</code></pre>

<h4 id="输出_2">输出</h4>

<p>{{ EmbedLiveSample('margin-left', 250, 100) }}</p>

<h3 id="text-indent">text-indent</h3>

<p><code>text-indent</code> 在 first-line 伪元素上无效</p>

<h4 id="HTML_3">HTML</h4>

<pre class="brush: html">&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore.&lt;/p&gt;</pre>

<h4 id="CSS_3">CSS</h4>

<pre class="brush: css"><code>p::first-line { text-indent: 20px }</code></pre>

<h4 id="输出_3">输出</h4>

<p>{{ EmbedLiveSample('text-indent', 250, 100) }}</p>

<h2 id="标准">标准</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-line-pseudo', '::first-line')}}</td>
   <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
   <td>Defined more strictly where it can occur.<br>
    Generalized allowed properties to typesetting, text decoration and inline layout properties and {{ cssxref("opacity") }}<br>
    Defined the inheritance of <code>::first-letter</code>.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow', 'text-shadow with ::first-line')}}</td>
   <td>{{ Spec2('CSS3 Text Decoration')}}</td>
   <td>Allowed the usage of {{cssxref("text-shadow")}} with <code>::first-letter</code>.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Selectors', '#first-line', '::first-line') }}</td>
   <td>{{ Spec2('CSS3 Selectors') }}</td>
   <td>The definition of what is the first line of an element has been reworded. The two-colon syntax for pseudo-elements has been introduced.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>No significant change, though CSS Level 2 still used the one-colon syntax.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>The initial definition used the one-colon syntax.</td>
  </tr>
 </tbody>
</table>

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

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari (WebKit)</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0 (buggy when using <code>text-transform</code>: <a href="//code.google.com/p/chromium/issues/detail?id=129669">issue 129669</a>)</td>
   <td>{{ CompatGeckoDesktop("1") }}</td>
   <td>9.0</td>
   <td>7.0</td>
   <td>1.0 (85) (buggy when using <code>text-transform</code>: <a href="//bugs.webkit.org/show_bug.cgi?id=3409">issue 3409</a>)</td>
  </tr>
  <tr>
   <td>Old one-colon syntax (<code>:first-line</code>)</td>
   <td>1.0 (buggy when using <code>text-transform</code>: <a href="//code.google.com/p/chromium/issues/detail?id=129669">issue 129669</a>)</td>
   <td>{{ CompatGeckoDesktop("1") }}</td>
   <td>5.5</td>
   <td>3.5</td>
   <td>1.0 (85) (buggy when using <code>text-transform</code>: <a href="//bugs.webkit.org/show_bug.cgi?id=3409">issue 3409</a>)</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Phone</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("1") }}</td>
   <td>{{ CompatNo() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
  <tr>
   <td>Old one-colon syntax (<code>:first-line</code>)</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatGeckoMobile("1") }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
   <td>{{ CompatUnknown() }}</td>
  </tr>
 </tbody>
</table>
</div>

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

<ul>
 <li>The {{cssxref("::first-letter")}} pseudo-element.</li>
</ul>