我如何着手定位 div 的文字 "first-child"，样式取决于元素类型

Question

我正在为网站创建自定义 CSS，我遇到了将 CSS 应用到 div 的 first-child 的问题。我正在尝试使用特殊的 CSS 样式作为实际的第一个 child，具体取决于元素类型，并且样式特定于该元素的类型。因此，仅当文章的第一个元素（在 div 内）是图像时，它才会忽略文章边距。如果文章的第一个元素是一个段落，它会创建一个额外的 margin-top。任何不是字面上第一个 (non-div) 元素的东西都不应该应用任何 first-child 规则。

如果可能的话，我想只使用 CSS 来做到这一点，因为我只能将 CSS 应用于现有的 HTML.

这可能令人困惑。此 jsfiddle 使用与我的 html 非常相似的设置，并且我创建了一个 CSS 来显示我的错误。我知道我没有选择正确嵌套的 div，我只是不确定如何实现我想要的。在fiddle中，不同元素类型之后的每个元素都有一个first-child规则re-applied。这又是因为我不确定要引用哪个 div。

这是我的代码：

HTML:

<article>
<div class="body entry-content">
    <div class="sqs-layout sqs-grid-12 columns-12">
        <div class="col sqs-col-12 span-12">

            <div class="sqs-block image-block sqs-block-image">
                <div class="sqs-block-content">
                    <div class="image-block-outer-wrapper">
                        <div class="intrinsic">
                            <div class="image-block-wrapper">
                                <img src="http://media.npr.org/images/picture-show-flickr-promo.jpg" alt="image"></img>


            <div class="sqs-block markdown-block sqs-block-markdown">
                <div class="sqs-block-content">
                    <p>p1</p>
                    <p>p2</p>
                    <p>p3</p>
                </div>
            </div>
                                </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="sqs-block markdown-block sqs-block-markdown">
                <div class="sqs-block-content">
                    <p>p1</p>
                    <p>p2</p>
                    <p>p3</p>
                </div>
            </div>

            <div class="sqs-block image-block sqs-block-image">
                <div class="sqs-block-content">
                    <div class="image-block-outer-wrapper layout-caption-hidden">
                        <div class="intrinsic">
                            <div class="image-block-wrapper has-aspect-ratio">
                                <img src="http://media.npr.org/images/picture-show-flickr-promo.jpg" alt="image"></img>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="sqs-block markdown-block sqs-block-markdown">
                <div class="sqs-block-content">
                    <p>p1</p>
                    <p>p2</p>
                    <p>p3</p>
                </div>
            </div>

        </div>
    </div>
</div>

CSS:

    article {  
background-color:red;
padding:14px;
}
.body.entry-content {
padding:0px;
background-color:grey;
}
.body.entry-content p, img {
padding:0px;
margin:0px;
margin-bottom:1em;
}
.body.entry-content p:first-child{
    /* Only the first paragraph in an article confines to red margine and creates an extra margin-top to space the content further from the title (not seen here). */
margin-top:1em;
background-color:blue;
}
.body.entry-content img:first-child {
/* Only the first image in an article ignores all red margins, filling the article.*/
margin:-14px -14px 0px -14px;
}

Answer 1

为了引用 img，这对我有用 - 我认为这个选择器对你来说足够具体：

        .body.entry-content .sqs-layout div.image-block:first-child img {
            /* Only the first image in an article ignores all red margins, filling the article.*/
            margin: -14px -14px 0px -14px;
        }

Answer 2

可能，但是所有那些嵌套的 div 让它变得非常丑陋:

.body.entry-content div:first-child div:first-child div:first-child .sqs-block-content > p:first-child{
    background-color:blue;
}
.body.entry-content div:first-child div:first-child div:first-child .sqs-block-content div img:first-child {
    margin:-14px -14px 0px -14px;
}

Fiddle here.

我如何着手定位 div 的文字 "first-child"，样式取决于元素类型

How do I go about targeting the literal "first-child" of a div, styling depending on element type

html

css

css-selectors