Question

我坚持使用我的CSS。

在过去的几天里，我一直在学习CSS选择器，感觉我在取得进步。现在，我无法解决1个问题但是，我不明白是什么导致了这个问题。

<aside>
<section>
    <article>
    <h1>Campaign Details</h1>
    <div class="table">
        <p><span>Campaign </span><span>This</span></p>
        <p><span>Campaign </span><span>That</span></p>
        <p><span>Campaign </span><span>Created on 03/09/2014</span></p>
        <p><span>Campaign </span><span>03/09/2014 11:57:41</span></p>
        <p><span>Campaign </span><span>03/09/2014 11:59:52</span></p>
        <p><span>Number</span><span>1</span></p>
    </div>
</article>

CSS

   aside section article {
        width:350px;
        float:left;
    }

    aside section :last-child{
        margin-left:10px;
    }

    aside section article:after {
        clear:both;   
        display:table;
        content: '';
    }


    .table  {
        margin:20px;
        padding:10px;
        border:solid 1px #ccc;
        background:white;
        overflow:auto;
    }


    .table p {
        clear:both;
        margin:0px;
        padding:5px;
        overflow:auto;
    }

    .table p:nth-child(1n) {
        background: #EBEBEB;
    }

    .table p:nth-child(2n) {
        background: #fff;
    }

    .table p span:nth-child(1n) {
        font-weight:bold;
    }

    .table p span:nth-child(2n) {
        width:150px;    
        float:right;
        font-weight:normal;   
    }

正如您在此屏幕中看到的那样

enter image description here

正如你所看到的，我有额外的填充，但是，我不知道这个填充来自哪里。

无论<p>标签的数量（格式相同），最后一个条目都有问题。我正在考虑使用CSS选择器来计算last-child，但这感觉很糟糕。

有可能解决这个问题吗？

Answer 1

aside section :last-child {

导致保证金：

margin-left: 10px;

这就是为什么它在最后一项上有额外的10px提升。

Answer 2

我建议使用css重置表。它们会重置奇怪的默认样式，因此您不必担心跨部分的浏览器内容：last-child

这是一个例子：http://www.cssreset.com/scripts/eric-meyer-reset-css/

Answer 3

您在element选择器和last-child选择器之间添加了一个空格：

aside section :last-child...

它应该没有空格（因为空格表示新的子选择器

aside section:last-child...

然后你就有了你想要的效果。

http://jsfiddle.net/toa1qakm/4/

老实说，这应该是一个表，因为它似乎是表格数据。：）

CSS渲染问题

3 个答案: