Css html elements,css or html5 for first and last elements

问题

Users can enter descriptions which may include paragraphs or lists. Or they may just enter text without any enclosing

or

• elements. What I need to do is remove most of the padding and margin above the first element and below the last element so that the user entered content has a nice tight border around it. So I could do one of the following:

Use a css rule I was unaware of to target only the first and last elements

Use css3 or html5 (I assume there's something within these to easily do what I want) and hope everyone upgrades their browsers asap while the older browsers just get a slightly uglier version of the page

Find the first and last elements with Javascript and modify accordingly

Modify the html to add a class like

Ideally the 1st solution exists, does it? I'm ok with the 2nd solution though if not, does it exist? The last 2 I don't care for...

UPDATE: don't care about IE6. But I do need to deal with the situation that if there's just text to begin with, without any

or

• or other elements, then actually nothing special needs to be done for the top margin/padding.

回答1:

Use :first-child and :last-child like this. Note that > and :first-child (CSS2) doesn't work in IE6 and below, and :last-child (CSS3) doesn't work in IE8 and below. The only real workaround to both is to use a .first and .last class respectively (you can add them dynamically with JavaScript as Phrogz says).

.description > p, .description > ul {

margin: 1.5em 0;

}

.description > :first-child {

margin-top: 0;

}

.description > :last-child {

margin-bottom: 0;

}

I added the > combinator to prevent elements like strong or li getting selected. What does it mean?

回答2:

Something like this?

.container * + p, .container * + ul

{

margin: 1em 0 0;

}

.container p, .container ul

{

margin: 0;

}

回答3:

BoltClock's answer works great in most cases, but IE8 and earlier ignores the :...-child pseudo-selectors.

You can use jQuery to accomplish the same thing, while targetting more browsers.

//On ready...

$(function(){

//Update styles dynamically

$('ul:last').css({'margin-bottom':0,'padding-bottom':0});

$('ul:first').css({'margin-top':0,'padding-top':0});

});

回答4:

Have you considered wrapping the content in a container with a negative margin? It requires the content to at least be wrapped in a single p element (not hard to test/add melodramatically).

CSS:

.container {border:1px solid black;}

.container .subcontainer {margin:-1em 0;}

.container p {margin:1em 0;}

HTML:

My first paragraph.

My second paragraph.

来源：https://stackoverflow.com/questions/4650319/css-or-html5-for-first-and-last-elements