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部分中所有段落的第一个字母。如何包含第一个类型的伪类以确保只更改了第一个段落的字母？

Answer 1

只使用两者 first-child伪类和第一个字母伪类

请参阅小提琴 - 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;
}

请查看demo。

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

2 个答案: