9 
<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
p:before {  
    content:"Former - "; 
    color:red;
    font-family:"Tahoma" ,Times New Roman;
    font-size:70%;
}

p.normal:first-letter {
    font-size:40px;
    color:blue;
}
</style>
</head>
<body>
  <p class="normal">First character of this paragraph will
  be normal and will have font size 40px;</p>
</body>
</html>

ここでは、疑似要素の内容が赤で表示されていますが、「この段落の最初の文字:before」の文字「F」も青でスタイルしたいと考えています。代わりに、「F ormer - 」の「F」が青色で表示されます。

私が望むのは、コンテンツの後:beforeの最初の文字と両方を同じ段落に適用することです。これは可能ですか？もしそうなら、どのように？.normal :before

4

4 に答える 4

8

通常、これは:first-letter疑似要素を使用して行いますが、実際のコンテンツの最初の文字ではなく、段落の実際のコンテンツの前:beforeにテキストを挿入:first-letterするコンテンツがあると見なすと、代わりにコンテンツの最初の文字と一致し:beforeます。

つまり、これの代わりに：

<p class="normal">
  <p:before>Former - </p:before>
  <p.normal:first-letter>F</p.normal:first-letter>irst character of this paragraph will
  be normal and will have font size 40px;
</p>

あなたは実際にこれを手に入れます：

<p class="normal">
  <p:before>
    <p.normal:first-letter>F</p.normal:first-letter>ormer - 
  </p:before>
  First character of this paragraph will
  be normal and will have font size 40px;
</p>

CSSで生成されたコンテンツがどのように機能するかにより、コンテンツを前に挿入した後、実際のコンテンツの最初の文字に到達するための純粋なCSSの解決策はないと思います。

別の方法として、疑似要素spanの代わりにinを使用して、青い色を適用することもできますが、これは、追加の要素を挿入する必要があることを意味します。:first-letter

  <p class="normal"><span>F</span>irst character of this paragraph will
  be normal and will have font size 40px;</p>

p.normal span {
    font-size:40px;
    color:blue;
}
于 2012-07-29T15:27:54.320 に答える
-1 
<!DOCTYPE html>
<html lang="en">
  <head>

    <title>Complicated pseudo element and span</title>

    <style type="text/css">
      <!--
      p:before {  
           content:"Read this -"; 
           color:red;
           font-family:"Tahoma" ,Times New Roman;
           font-size:100%;}

            .span {
                   font-size:40px;
              color:blue; 
                 } 

         -->
   </style>

  </head>
  <body>

    <p><span style="color:blue; font-size:30px" >F</span>irst character of this paragraph
        will be normal and will have font size 40px;</p>

  </body>
</html>

ガイドラインをありがとう-私は自分の出力を私が想像する方法で手に入れました、そして私はそれが欲しいです

于 2012-07-29T18:46:41.477 に答える