css第一个字母排除其他标签 [英] css first-letter exclude other tags

问题描述

我有一个由WordPress生成的页面，其HTML看起来类似于下面的HTML。我想要我的 div 的第一个字母有不同的大小，但是当我尝试添加样式 p：first-letter ，所有 p 的更改大小。我的问题是我不能删除 p -tags，因为这些是自动创建的。

 < div class =div> 
< p>第1段< / p> <！ - 我需要在段落中不同大小的P - > 
< p>第2段< / p> 
< blockquote>< p>文字块引用< / p>< / blockquote> 
< / div> 
  

有任何建议吗？

http://jsfiddle.net/hdNDh/

解决方案

使用 CSS子选择器<$ c $ F - 匹配任何作为元素E的子元素的F元素。

< jsFiddle

  .div> p：first-letter {
 font-size：40px; 
} 
  

修改：似乎我误解了您的问题首先，如果只需要 div 的第一个字母，只需在 div 上设置伪类， p 。

jsFiddle

  .div：first-letter {
 font-size：40px; 
} 
  

Edit2：要在FF中工作，您需要：

  .div> p：first-child：first-letter {
 font-size：40px; 
} 
  

jsFiddle

这看起来很奇怪/我有一些看看，看起来火狐比其他浏览器更特别的：第一个字母伪类。一个例子是，它不计数特殊字符为字母 ，因此不会对它们应用样式。

刚刚测试的结果：Firefox 不计算第一个子元素的第一个字母与本身中遇到的第一个字母相同，包括子元素（即使没有前面的文字），而Chrome 第一个子元素与中遇到的第一个字母相同，包括子元素（当没有前面的文本时）

。

I have a page generated by WordPress which HTML looks similar to the HTML below. I would like to the first-letter of my div to have a different size, but when I try to add style for p:first-letter, all p's change sizes. My problem is I can't remove the p-tags because these are automatically created.

<div class="div">
    <p>Paragraph 1</p> <!-- I need "P" in "Paragraph" in different size -->
    <p>Paragraph 2</p>
    <blockquote><p>Text blockquote</p></blockquote>
</div>

Any suggestions?

http://jsfiddle.net/hdNDh/

解决方案

Use the CSS child selector >.

E > F - Matches any F element that is a child of an element E.

jsFiddle

.div > p:first-letter {
    font-size:40px;
}

Edit: It seems I misunderstood your question at first, if you need the first letter of the div only, simply set the pseudo-class on the div instead of on the p.

jsFiddle

.div:first-letter {
    font-size:40px;
}

Edit2: As mentioned in the comments below, for this to work in FF you need:

.div > p:first-child:first-letter {
    font-size:40px;
}

jsFiddle

This seems strange/weird behaviour, so I have had a bit of a look around and it seems that Firefox is more particular about the :first-letter pseudo-class than other browsers. One example is that it doesn't count special characters to be letters, and therefore won't apply styles to them.

Results from testing a little bit just now: Firefox doesn't count the first letter of the first child element to be the same as the first letter encountered within itself including child elements (even when there is no preceding text), whereas Chrome does count the first letter of the first child element to be the same as the first letter encountered within itself including child elements (when there is no preceding text).

这篇关于css第一个字母排除其他标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！