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>

编辑：“链接”意味着第二个给定的类名可能会覆盖第一个给定类的属性。如果你想让它没有类名，你必须将你的 CSS 更改为：

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

我会建议你这样做。拥有一堆 css 类会让你的标记变得不可读。如果您想在特别是一个段落中使用它，您应该查看是否可以将特定的 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 回答