[英]css first-letter exclude other tags
I have a page generated by WordPress which HTML looks similar to the HTML below. 我有一个由WordPress生成的页面,该页面的HTML与下面的HTML相似。 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. 我希望
div
的第一个字母具有不同的大小,但是当我尝试为p:first-letter
添加样式时,所有p
的更改大小。 My problem is I can't remove the p
-tags because these are automatically created. 我的问题是我无法删除
p
标签,因为它们是自动创建的。
<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? 有什么建议么?
Use the CSS child selector >
. 使用CSS子选择器
>
。
E > F - Matches any F element that is a child of an element E.
E> F-匹配作为元素E的子元素的任何F元素。
.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
. 编辑:似乎我起初误解了您的问题,如果只需要
div
的第一个字母,只需在div
而不是p
上设置伪类。
.div:first-letter {
font-size:40px;
}
Edit2: As mentioned in the comments below, for this to work in FF you need: Edit2:如下面的评论中所述,要使其在FF中起作用,您需要:
.div > p:first-child:first-letter {
font-size:40px;
}
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. 这似乎很奇怪/怪异,所以我环顾了一下,似乎Firefox比其他浏览器更特别关注
:first-letter
伪类。 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) . 刚才的测试结果:Firefox 不会 将第一个子元素 的第一个字母与包含子元素的自身内部遇到的第一个字母相同(即使没有前面的文本也是如此) ,而Chrome 会计算在内 第一个子元素 的第一个字母应与自身(包括子元素)在内部遇到的第一个字母相同(如果没有前面的文本) 。
You need a combination of selectors: 您需要选择器的组合:
http://jsfiddle.net/hdNDh/5/ http://jsfiddle.net/hdNDh/5/
.div > p:first-child:first-letter {
font-size:40px;
}
You can use: 您可以使用:
.div > p:first-child::first-letter {
font-size: 24px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.