插入div后的CSS缩进段落？

Question

My goal: Have all paragraphs indent except for the ones following .firstCharacter.

I have a drop cap leading off the first paragraph of certain sections in my page. I have set all the paragraph tags after the first one to indent using...

.storyContainer p + p {
    text-indent: 1.5em;
    margin-top: 0
}

I am setting my drop cap using...

.firstcharacter {
    float: left;
    font-size: 80px;
    line-height: 60px;
    padding-top: 4px;
    padding-right: 8px;
    padding-left: 3px;
    font-family: 'Droid Serif', serif;
}

My html is as such...

<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>

Any help on how to get this squared away?

Thanks!

Answer 1

http://jsfiddle.net/WRKxQ/

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;
}

this should solve it?

i basically just shifted your css and html a bit.

have fun

jascha

Answer 2

For your first line, you can just use p::first-line{} to indent it. For your first character, you can use p::first-letter .For IE<9 you will want to use only one colon.

To select all the paragraphs after the first one, you can use the nth-child(n) pseudo-class.