p：如果img标签紧跟在p标签之后，第一个子代不工作？ [英] p:first child doesn't work if a img tag is immediately after the p tag?

问题描述

Hy there，
无法让它工作我有这样的

Hy there, can't make it to work i have something like this

    .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标签。我无法编辑源代码，因为我为一个blogger域做一些模板。没有什么严重，它只是这么混乱。第一个字母应选择字母而不是图像。

So if theres no picture the first letter works. Is there a way to skip the img tag. I cant edit the source code because im doing some template for a blogger domain. nothing serious, its just so confusing. first letter should select the letter not the image.

推荐答案

稍后研究我发现第一个字母只能用于块元素（你正在做）。

After a bit of research I found out that first-letter can only be used on block elements (which you were doing).

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

In this solution I increased the selectivity of the text by wrapping it in a span and put in the proper styling to make the span an inline-block

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：如果img标签紧跟在p标签之后，第一个子代不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！