9.5　选择元素的一部分

可以只选择元素的第一个字母或第一行，并对其添加样式。

  1. 选择元素的第一行

  • 输入element，这里的element是要对其第一行进行格式化的元素的选择器。

  • 输入:first-line以选择第一步中引用的元素的第一整行，参见图9.5.1、图9.5.2和图9.5.3。

  1. 选择元素的第一个字母

  2. 输入element，这里的element是要对其第一个字母进行格式化的元素的选择器。

  3. 输入:first-letter以选择第1步中引用的元素的第一个字母，参见图9.5.4和图9.5.5。

  1. <article class="about">
  2.      <h1>Antoni Gaudí</h1>
  4.      <p>Many tourists are drawn to Barcelona to see Antoni Gaudí's incredible architecture.</p>
  5.      <p>Barcelona <a href="http:// www.gaudi2002.bcn.es/english/" rel="external">celebrated the 150th anniversary</a> of Gaudí's birth in 2002.</p>
  7.      <section class="project">
  8.         <h2 lang="es">La Casa Milà</h2>
  9.         <p>Gaudí's work was essentially useful. <span lang="es">La Casa Milà</span> is an apartment building and <em>real people</em> live there.</p>
  10.      </section>
  12.      <section class="project">
  13.         <h2 lang="es">La Sagrada Família</h2>
  14.         <p>The complicatedly named and curiously unfinished Expiatory Temple of the Sacred Family is the <em>most visited</em> building in Barcelona.</p>
  15.      </section>
  16. </article>

图9.5.1　这里无法分辨哪些文字会受到first-line的影响，因为只有在浏览器中查看页面，根据内容的流动，才能看出哪些文字在第一行。这里讲的第一行并不是由HTML中的分行决定的

  1. p:first-line {
  2.     color: red;
  3. }

图9.5.2　这个选择器会选择每个p元素的第一行

9.5　选择元素的一部分 - 图1

图9.5.3　调整浏览器的宽度就会改变第一行的内容（并会改变受格式化影响的范围）

  1. p:first-letter {
  2.     color: red;
  3. }

图9.5.4　这个选择器仅会选择每个p元素的第一个字母。对应的HTML代码见图9.5.1

9.5　选择元素的一部分 - 图2

图9.5.5　first-letter可用于创建首字母下沉的效果（但要等讲到除color以外的更多属性以后）

提示　根据CSS规范，选择器应包含第一个字母前面的标点符号。现代浏览器都支持这一特性，但旧版本的IE却并不是这样做的，它将标点符号本身当做第一个字母。

　

提示　只有某些特定的CSS属性可以应用于:first-letter伪元素，包括font、color、background、text-decoration、vertical-align（只要:first-letter不是浮动的）、text-transform、line-height、margin、padding、border、float和clear。这些属性将在第10章和第11章讲到。

　

提示　可以将:first-letter和:first-line伪元素与比这个例子中的选择器更复杂的选择器结合使用。例如，如果要选择包含在project类元素中的每个段落的第一个字母，可以使用.project p:first-letter。

　

伪元素、伪类及CSS3的::first-line和::first-letter语法

在CSS3中，:first-line的语法为::first-line，:first-letter的语法为::first-letter。注意，它们用两个冒号代替了单个冒号。

这样修改的目的是将伪元素（有四个，包括::first-line、::first-letter、::before和::after）与伪类（如:first-child、:link、:hover等）区分开。

伪元素（pseudo-element）是HTML中并不存在的元素。例如，定义第一个字母或第一行文字时，并未在HTML中作相应的标记。它们是另一个元素（在本例中为p元素）的部分内容。

相反，伪类（pseudo-class）则应用于HTML元素。例如，使用:first-child可以选择某元素的第一个子元素。

未来，::first-line和::first-letter这样的双冒号语法是推荐的方式，现代浏览器也支持它们。原始的单冒号语法则被废弃了，但浏览器出于向后兼容的目的，仍然支持它们。不过，IE9之前的Internet Explorer版本均不支持双冒号。因此，你可以选择继续使用单冒号语法，除非你为IE8及以下版本设置了单独的CSS。