1

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

    .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 标签。我无法编辑源代码，因为我正在为博客域做一些模板。没什么大不了的，只是太混乱了。第一个字母应该选择字母而不是图像。

4

2 回答 2

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 和媒体查询/

于 2013-04-05T17:53:17.353 回答
0

经过一番研究，我发现首字母只能用于块元素（你正在做的）。

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

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; }
于 2013-04-05T18:05:20.143 回答