1

このコードは疑似要素first-letterを説明しておりfirst-line、正常に動作しています。

<html>
    <head>
    <title>Practice CSS :first-letter pseudo element </title>
    </head>

    <style type="text/css">
    <!--
    p:first-letter { font-size: 3em; text-color:red; }
    p.normal:first-letter { font-size: 40px; color:red; }

    p:first-line { text-decoration: none; }
    p.line:first-line { text-decoration: underline; }

    -->
    </style>

    <body>

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

    <p class="line">The first character of this paragraph will be 3em big
    and in red color as defined in the CSS rule above. Rest of the
    characters in this paragraph will remain normal. This example 
    shows how to use :first-letter pseudo element to give effect to
    the first characters of any HTML element.</p>

    </body>
</html>

以下のコードのように、「p」タグでこの疑似要素の最初の文字と最初の行の両方を同時に使用できますか?

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

<p >The first character of this paragraph will be 3em big
and in red color as defined in the CSS rule above. Rest of the
characters in this paragraph will remain normal. This example 
shows how to use :first-letter pseudo element to give effect to
the first characters of any HTML element.</p>
4

2 に答える 2

1

CSSでクラスを「連鎖」させたい場合は、クラス名のスペースをquptationマークで区切る必要があります。

<p class="normal line">Blah 42</p>

編集：「連鎖」とは、2番目に指定されたクラス名が最初に指定されたクラスの属性を上書きする可能性があることを意味します。クラス名なしで作成する場合は、CSSを次のように変更する必要があります。

p:first-line {blah...}
p:first-letter {blah..}

私はあなたがこのようにすることをお勧めします。たくさんのcssクラスがあると、マークアップが本当に読めなくなります。これを特に1つの段落に含めたい場合は、特定のCSS定義を親要素に追加できるかどうかを確認する必要があります。

p#myEmphasedParagraph:first-line {blah...}
p#myEmphasedParagraph:first-letter {blah...}

htmlでそれからこれ：

<p id="myEmphasedParagraph">blah</p>
于 2012-07-28T13:03:28.457 に答える
1

@wogが言ったように、のようなクラスに参加する必要がありますclass="normal line"。はい、できることを示すjsfiddleを次に示します。http://jsfiddle.net/3DnZD/

于 2012-07-28T13:10:05.557 に答える