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及更低版本中不起作用。两者唯一真正的解决方法是分别使用.first和.last类（您可以使用JavaScript动态添加它们，如Phrogz所说）。

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

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

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

我添加了>组合子，以防止选择strong或li等元素。 What does it mean?

Answer 2

这样的东西？

.container * + p, .container * + ul
{
  margin: 1em 0 0;
}

.container p, .container ul
{
  margin: 0;
}

Answer 3

BoltClock的答案在大多数情况下效果很好，但IE8及更早版本忽略了:...-child伪选择器。

您可以使用jQuery完成同样的事情，同时定位更多浏览器。

//On ready...
$(function(){
  //Update styles dynamically
  $('ul:last').css({'margin-bottom':0,'padding-bottom':0});
  $('ul:first').css({'margin-top':0,'padding-top':0});
});

Answer 4

您是否考虑将内容包装在具有负边距的容器中？它要求内容至少包含在一个p元素中（不难以通过戏剧性的方式测试/添加）。

CSS：

.container {border:1px solid black;}
.container .subcontainer {margin:-1em 0;}
.container p {margin:1em 0;}

HTML：

<div class="container"><div class="subcontainer">
    <p>My first paragraph.</p>
    <p>My second paragraph.</p>
</div></div>

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

4 个答案: