使:first-letter忽略图片？

Question

当有其他元素存在时，我想让:first-letter起作用，这是否可能？

我创建了一个jsfiddle来说明。

<h3 class="title"> 
 <img  src="/imgs/small-logo.png" width="31" height="30" />
 Test
 </h3>
 <h3 class="title"> 
 Test
 </h3>

无论如何使用:first-of-type或其他方法，但我无法使其忽略img。

唯一的其他方法是将字母包装在span中并进行样式设置，但我不喜欢分离，因为当屏幕折叠时，下面的单词也会折叠。

- user4630

---

谢谢大家，他们与这个例子一起工作。 - user4630

通过h3.title { background-image等方式应用标志吗？ - Alex K.

Answer 1

你可以尝试将图片位置调整为文本之后，然后在图片上使用“float:left”属性：http://jsfiddle.net/chrissp26/mp4UH/1/

- Chris Spittles

Answer 2

如果您愿意调整标记，可以将整个文本字符串包装在中。 HTML：

<h3 class="title"> 
     <img  src="/imgs/small-logo.png" width="31" height="30" />
     <span>Test</span>
 </h3>

<h3 class="title"> 
    <span>Test</span>
</h3>

CSS:

h3.title {
    color: #004265;
}
h3.title span {
    display: inline-block;
}
h3.title span:first-letter {
    color: red;
}

:first-letter 只适用于块级元素，因此将 span 设置为 inline-block。

这是可行的代码 - JsFiddle

- Jonathan

Answer 3

在MDN上这里看看

::first-letter CSS伪元素选择块的第一行的第一个字母，如果它不是在该行的其他内容（例如图像或内联表）之前。

我能想到的唯一潜在解决方案是将图像浮动，使其避免此规则，例如：

h3.title img{
    float:left;
}

{{链接1：Fiddle}}

- SW4

---

如果这是一个标志，那么使用伪元素进行样式设置会比实际图像更好。甚至只需添加填充并将标志作为标题元素的背景图像即可。 - Paulie_D