第一个和最后一个元素的css或html5

Question

用户可以输入可能包含段落或列表的描述.或者他们可能只输入文本而没有任何封闭<p>或<ul>元素.我需要做的是删除第一个元素上方和最后一个元素下方的大部分填充和边距,以便用户输入的内容周围有一个很好的紧密边框.所以我可以做以下其中一项:

• 使用我不知道的css规则只定位第一个和最后一个元素
• 使用CSS3或HTML5(我假设有内这些东西很容易做到我想要的),希望大家升级他们的浏览器,同时尽快将旧的浏览器刚刚得到的页面的略丑陋版本
• 使用Javascript查找第一个和最后一个元素并进行相应修改
• 修改html以添加类 <p class="first">

理想情况下,第一种解决方案存在,是吗？我对第二种解决方案没问题,但如果没有,它是否存在？最后2我不在乎......

更新:不关心IE6.但我确实需要处理的情况,如果有只是文本首先,没有任何<p>或<ul>或其他元素,然后为上边距/填充做其实也没什么特别的需求.

Answer 1

使用:first-child和:last-child这样.请注意,>和:first-child(CSS2)在IE6及以下,并且不工作:last-child(CSS3)在IE8及以下不工作.两者唯一真正的解决方法是分别使用a .first和.last类(你可以像Phrogz所说的那样用JavaScript动态添加它们).

.description > p, .description > ul {
    margin: 1.5em 0;
}

.description > :first-child {
    margin-top: 0;
}

.description > :last-child {
    margin-bottom: 0;
}

我添加了>组合器以防止元素strong或被li选中.这是什么意思？