Question

我正在尝试在单个类中输出多个元素，但是我无法将页面顶部与实际元素分开。

我尝试将每张图片与div.element img:not(:nth-of-type(1)){和div.element img:nth-of-type(1){分开，但这些图片无效。我如何操纵第一个元素之间的空间，而不是其他元素？

<div class="element">
<a href="http://website.com" target="_blank" border="0"><img src="http://website.com"></a>
</div>

<div class="element">
<div id="Projecttitle" class="Projecttitle">Test Title</div>
</div>


<div class="element">
<div id="Projectdescription" class="Projectdescription">Test description</div>
</div>
<div class="element">
<a href="http://website.com" target="_blank" border="0"><img src="http://website.com"></a>
</div>

<div class="element">
<div id="Projecttitle" class="Projecttitle">Test Title</div>
</div>


<div class="element">
<div id="Projectdescription" class="Projectdescription">Test description</div>
</div>

Answer 1

div.element:first-child {
  padding-top: 0;
}

div.element {
  padding-top: 10px;
}

Answer 2

您的HTML没有意义。如果你保留逻辑上属于一起的元素，你会得到更容易定型的语义代码，如下所示：

<div class="project">
    <div class="image">
        <img src="#" alt="image">
    </div>

    <div class="text">
        <h1>Test Title</h1>  
        <p>Test description</p>
    </div>
</div>

还有一些CSS：

.image {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    padding: 10px 20px 10px 0;
}

.text {
    float: left;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    padding: 10px 0 10px 20px;
    border-left: 1px solid black;
}

.project:first-child .image,
.project:first-child .text {
    padding-top: 0;
}

.project:last-child .image,
.project:last-child .text {
    padding-bottom: 0;
}

JSFiddle

那应该让你开始吧！

Answer 3

试试这个：

div.element:nth-of-type(1) img {
  padding-top: /* some value */;
}

:nth-of-type()和类似的伪类作用于其父级上下文中的元素。换句话说，它只评估直接兄弟姐妹。您的个人<img>元素彼此不是兄弟姐妹，因为他们有不同的父母。

CSS：保证金问题

3 个答案: