Question

此代码解释了伪元素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>

Answer 1

如果你想在CSS中使用“chaining”类，你必须将类名空间分隔为quptation marks：

<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>

Answer 2

像@wog说的那样，你需要加入像class="normal line"这样的类。这是一个jsfiddle，表明是的，你可以。 http://jsfiddle.net/3DnZD/

CSS伪元素

2 个答案: