Question

那里，不能让它工作我有这样的东西

    .body-post p:first-child:first-letter
    {
    font-size:240%;
    }

这里是html：

    <div class="body-post">
    <p><img src="http://#" align="left" style="margin-right:5px;"/>
    some text</p></div>

所以，如果没有图片，那么第一个字母就可以了。有没有办法跳过img标签。我无法编辑源代码，因为我正在为博客域做一些模板。没什么大不了的，它只是如此令人困惑。第一个字母应该选择字母而不是图像。

Answer 1

将图像放在P标签的一侧并使用以下内容。图像仍然允许P换行，因为这就是浮动元素所做的事情。

 .body-post > p:first-child:first-letter {
    font-size:240%;
 }

  <div class="body-post">
    <img src="http://#" align="left" style="margin-right:5px;"/>
    <p>some text</p>
 </div>

//旁注，尽可能避免使用内联样式。它可能会干扰JS和媒体查询/

Answer 2

经过一点research后，我发现第一个字母只能用于块元素（你正在做的）。

在这个解决方案中，我通过将文本包装在一个跨度中来增加文本的选择性，并使用适当的样式使跨度成为内联块

http://jsfiddle.net/52Vjm/1/

<div>
    <p>
        <img src="http://placekitten.com/100/100"/>
        <span>Kittens are great</span>
    </p>
</div>

span:first-letter { font-size:2em; }
span { display:inline-block; }
img { margin-right:5px; }

p：如果im标签紧跟在p标签之后，第一个孩子不起作用？

2 个答案: