如何定位 div 的字面“第一个孩子”，样式取决于元素类型

Question

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

我想尽可能只使用 CSS，因为我只能将 CSS 应用到现有的 HTML。

这可能令人困惑。这个jsfiddle 使用与我的html 非常相似的设置，并且我创建了一个显示我的错误的CSS。我知道我没有选择正确嵌套的 div，我只是不确定如何实现我想要的。在小提琴中，不同元素类型之后的每个元素都重新应用了第一个子规则。这又是因为我不确定要引用哪个 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

有可能，但所有嵌套的 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.

Answer 2

要引用 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;
        }