：第一个字母CSS - 将其限制为模板中文章的第一个字母

Question

我在这个例子中仅仅针对第一个字母时遇到了问题：http://jsfiddle.net/gB94x/

显然，“阅读更多”也不应该有降价上限。

HTML无法更改，它是固定模板的一部分。

谢谢！

Answer 1

.od_article>p引用p的直接子项的所有.od_article标记，其中存在您的问题。您只需要第一个p标记。将.od_article>p:first-letter更改为.od_article>p:first-of-type:first-letter，如下面更新的小提琴。

http://jsfiddle.net/gB94x/1/

<强>更新

我不相信IE7不支持:first-of-type。我不确定它是否支持:first-child，但作为参考，:first-child匹配，如果它应用的元素是其父元素的第一个子元素。

我无法想到一个解决方法，但是要查看HTML，p要更改第一个字母为CaptionPic1。如果第一段总是有这个类，那就使用它，所以.CaptionPic1:first-letter。

Answer 2

你的选择器：

.od_article>p:first-letter

尝试将样式应用于的每个 p子项的第一个字母，其父级具有类od_article。

您可以使用它来获取第一个p元素：

.od_article>p:first-of-type:first-letter

或者，如果你需要支持像IE7和IE8这样的旧浏览器，它们不懂:first-of-type等CSS3伪类，你知道第一个孩子总是h1并且第一个p始终跟随HTML结构中的h1，您可以将:first-child与兄弟选择器一起使用，如下所示：

.od_article>h1:first-child+p:first-letter

jsFiddle preview