1

CMSのリッチテキストエディタからの出力をクリーンアップしようとしています。うまく配置したいと思います。コピー内のすべての見出しにマージントップを追加していますが、最初の見出しからそれを削除したいと思います。

最初のコンテンツが見出しではなく「p」である場合でも、それは機能しません。私は過去に「+」セレクターである程度の成功を収めましたが、それを実現できないようです。

<div class="body_copy">
    <h5>My Heading here</h5>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>

    <p>
        <img src="images/image1.jpg" alt="">
    </p>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

    <h5>Another heading here</h5>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

あなたのアイデアに感謝します！

編集：すべてのp + h2、p + h3をターゲットにして、それらにmargin-topを適用すると、ある程度機能していると思います。より良いアプローチがあるかどうかまだ興味がありますか？

4

3 に答える 3

0

According to CSS2 Selector (no CSS3 selector involved in your question... and you better bookmark this two links :), + is the Adjacent Sibling Selector (Adjacent Sibling Combinator in CSS3), that will match elements only if absolutely adjacents (one following another, with nothing in the middle).

要素 E が先行する (ただし、すぐではない) すべての F 要素に一致するGeneral Sibling Combinatorを検討することをお勧めします。E ~ F

于 2013-01-28T12:48:11.933 に答える
0

~セレクターを探しています。+ セレクターよりも厳密ではありません。

div > h1 {
    margin-top: 0;
}

div > h1 ~ h1 {
    margin-top: 20px;
}

上記の例では、div 内の最初の見出しを除いて、div 内のすべての見出しの上部に 20px の余白があります。

これが役立つことを願っています！

于 2013-01-28T12:41:49.963 に答える
0

見出し要素が常にその親の最初の子である場合の最も簡単なオプションは次のとおりです。

h1, h2, h3 /* ...etc */ {
    margin-top: 1em;
}

h1:first-child, h2:first-child, h3:first-child /* ...etc */ {
    margin-top: 0;
}

:first-child要素内および要素の直接の子である見出しのみに制限するには.body_copy、セレクターを変更するだけです。

.body_copy > h1,
.body_copy > h2,
.body_copy > h3 /* ...etc */ {
    margin-top: 1em;
}

.body_copy > h1:first-child,
.body_copy > h2:first-child,
.body_copy > h3:first-child /* ...etc */ {
    margin-top: 0;
}
于 2013-01-28T13:02:17.830 に答える