我的目标:让所有段落缩进,除了.firstCharacter之后的段落。
我的页面中某些部分的第一段有一个首字下沉。我已经在第一个之后设置了所有段落标记,以便使用...
缩进.storyContainer p + p {
text-indent: 1.5em;
margin-top: 0
}
我正在设置我的首字下沉...
.firstcharacter {
float: left;
font-size: 80px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family: 'Droid Serif', serif;
}
我的HTML就是这样......
<div class="headline">This is a headline!</div>
<p><span class="firstcharacter">T</span>his text NOT indented because it's first</p>
<p>This text will be indented because it's second.</p>
<p>This text will be indented because it's third.</p>
<div class="someBox">This is some extra box</div>
<p>I want this to be indented but it won't be because it is first after the box!</p>
<p>This text will be indented because it's second.</p>
<div class="headline">This is a headline!</div>
<p><span class="firstcharacter">T</span>his text NOT indented because it's first</p>
<p>This text will be indented because it's second.</p>
<p>This text will be indented because it's third.</p>
<div class="someBox">This is some extra box</div>
<p>I want this to be indented but it won't be because it is first after the box!</p>
<p>This text will be indented because it's second.</p>
有关如何将其平方的任何帮助?
谢谢!
答案 0 :(得分:0)
HTML:
<div class="headline">This is a headline!</div>
<p class="firstcharacter"><span>T</span>his text NOT indented because it's first</p>
<p>This text will be indented because it's second.</p>
<p>This text will be indented because it's third.</p>
<div class="someBox">This is some extra box</div>
<p>I want this to be indented but it won't be because it is first after the box!</p>
<p>This text will be indented because it's first.</p>
<div class="headline">This is a headline!</div>
<p class="firstcharacter"><span>T</span>his text NOT indented because it's first</p>
<p>This text will be indented because it's second.</p>
<p>This text will be indented because it's third.</p>
<div class="someBox">This is some extra box</div>
<p>I want this to be indented but it won't be because it is first after the box!</p>
<p>This text will be indented because it's first.</p>
的CSS:
p {
text-indent: 1.5em;
margin-top: 0
}
.firstcharacter {
text-indent: 0;
}
.firstcharacter span {
float: left;
font-size: 80px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
font-family:'Droid Serif', serif;
}
这应该解决吗?
我基本上只是稍微调整了你的CSS和HTML。
玩得开心
雅舍
答案 1 :(得分:0)
对于第一行,您只需使用p::first-line{}
缩进即可。对于您的第一个角色,您可以使用p::first-letter
。对于IE&lt; 9,您只想使用一个冒号。
要选择第一个之后的所有段落,可以使用nth-child(n)伪类。