Fiddle

Question

我试图得到：当有其他元素时，第一封信工作，是否可能？

我创建了一个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。

唯一的另一种方法是用一个跨度和样式包装字母，但我不喜欢分离，因为屏幕崩溃时，下面的其余部分也是如此。

Answer 1

您可以尝试更改图片的位置，使其位于文字后面，然后在图片上使用float: left：

http://jsfiddle.net/chrissp26/mp4UH/1/

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仅适用于块级元素，因此将范围设置为inline-block。

以下是工作代码 - JsFiddle

Answer 3

看看here on MDN

:: first-letter CSS pseudo-element选择第一个字母块的第一行，如果它没有任何其他内容（例如图像或内联表格）。

我能想到的唯一可能的解决方案是浮动图像，使其逃脱此规则，例如

h3.title img{
    float:left;
}

获取：忽略图像的第一个字母？

3 个答案:

Fiddle