css - 如何在我的样式规则选择器中使用 first-of-type 伪类和第一个字母伪元素

Question

如何正确格式化此样式规则？

到目前为止，我有：

#speech p:first-letter {
    font-size: 4em;
    float: left;
    line-height: 0.8em;
    margin-right: 0.3em;
    padding-right: 0.2em;
    padding-bottom: 0.2em;
    border: solid black;
    border-right-width: 0.02em;
    border-bottom-width: 0.02em;
}

这会更改#speech 部分中我所有段落的第一个字母。如何包含 first-of-type 伪类以确保仅更改第一段的字母？

Answer 1

只使用第一个子伪类和首字母伪类

见小提琴 - http://jsfiddle.net/QX45P/

p:first-child:first-letter {
    font-size: 4em;
    float: left;
    line-height: 0.8em;
    margin-right: 0.3em;
    padding-right: 0.2em;
    padding-bottom: 0.2em;
    border: solid black;
    border-right-width: 0.02em;
    border-bottom-width: 0.02em;
}

Answer 2

试试这个：

#speech p:first-of-type:first-letter {
    font-size: 4em;
    float: left;
    line-height: 0.8em;
    margin-right: 0.3em;
    padding-right: 0.2em;
    padding-bottom: 0.2em;
    border: solid black;
    border-right-width: 0.02em;
    border-bottom-width: 0.02em;
}

请查看演示。