0

1つのクラスで複数の要素を出力しようとしていますが、ページの上部を実際の要素から分離するのに問題があります。

各画像をで分離しようとしましたが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>
4

3 に答える 3

1

あなたの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

それはあなたが始めるはずです！

于 2012-11-24T11:18:38.837 に答える
1 
div.element:first-child {
  padding-top: 0;
}

div.element {
  padding-top: 10px;
}
于 2012-11-24T07:42:05.120 に答える
0

これを試して：

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

および同様の:nth-of-type()疑似クラスは、親のコンテキストで要素に作用します。つまり、直接の兄弟のみを評価します。個々の<img>要素は、親が異なるため、互いに兄弟ではありません。

于 2012-11-24T07:24:43.853 に答える