Question

我有以下HTML：

<div class="Container">
    <div>
        <div>
            <img src="/img/car1.png" class="Dealer"/>
            </div>
    </div>
    <div>
        <div>
            <img src="/img/car2.png" class="Dealer"/>
            </div>
    </div>
    <div>
        <div>
            <img src="/img/car3.png" class="Dealer"/>
            </div>
    </div>
</div>

我想将padding-left: 0px添加到第一个img。我不知道如何做到这一点。有人可以帮忙吗？

Answer 1

这是一个特定的CSS选择器，它只会选择您要查找的第一个img。

.Container > div:first-child > div > img.Dealer {
    padding-left:0px;
}

这是适用于您的HTML的CSS实时实时演示：

.Dealer {
    padding-left: 20px;
}

.Container > div:first-child > div > img.Dealer {
    padding-left: 0;
}

<div class="Container">
    <div>
        <div>
            <img src="http://i.imgur.com/I9ldaCx.png" class="Dealer"/>
            </div>
    </div>
    <div>
        <div>
            <img src="http://i.imgur.com/I9ldaCx.png" class="Dealer"/>
            </div>
    </div>
    <div>
        <div>
            <img src="http://i.imgur.com/I9ldaCx.png" class="Dealer"/>
            </div>
    </div>
</div>

JSFiddle版本：https://jsfiddle.net/r8hpnbwg/

Answer 2

我想将padding-left: 0px添加到第一个img。我不知道如何做到这一点。

如果此padding对于此图片而言是唯一的，并且您希望简单易用，则只需使用id。

HTML

<img src="/img/car1.png" class="Dealer" id="unique-style" />

CSS

#unique-style { padding-left: 0px; }

或（如评论中的@Jeff所述）您可以使用其他class：

<img src="/img/car1.png" class="Dealer unique-style" />

CSS

.unique-style { padding-left: 0px; }

Answer 3

使用css，您可以通过执行以下操作来完成此操作：

.Dealer:nth-of-type(1){
    padding-left:0px;
}

修改一个解释，因为你似乎不清楚发生了什么。 CSS用于网页样式，而HTML是结构。这里的CSS适用于DOM中带有class="Dealer"的第一个元素。将其更改为nth-of-type(2)将是第二个，依此类推。

删除:nth-of-type(1)选择器会将该样式应用于所有页面上class="Dealer"的元素。

Answer 4

考虑到您可能希望为每个图像提供自己的填充，可能有助于为图像提供自己的ID。按类选择作为另一个答案会将所有图像的填充设置为0px。

#image1{
  padding-left: 0px;
}

<div class="Container">
    <div>
        <div>
            <img src="/img/car1.png" class="Dealer" id = "image1"/>
            </div>
    </div>
    <div>
        <div>
            <img src="/img/car2.png" class="Dealer"/>
            </div>
    </div>
    <div>
        <div>
            <img src="/img/car3.png" class="Dealer"/>
            </div>
    </div>
</div>

Answer 5

＆＃13;

.Dealer { padding-left:5px; } /* guessing a default */
.Container > div:first-child .Dealer {
  padding-left:0px;
}

＆＃13;

<div class="Container">
    <div>
        <div>
            <img src="/img/car1.png" class="Dealer"/>
        </div>
    </div>
    <div>
        <div>
            <img src="/img/car2.png" class="Dealer"/>
        </div>
    </div>
    <div>
        <div>
            <img src="/img/car3.png" class="Dealer"/>
        </div>
    </div>
</div>

＆＃13;

Answer 6

HTML您可以向图像添加一个css类。

<img src="/img/car1.png" class="Dealer dealer-left "/>

新CSS

。 dealer-left {padding-left：0px;}

Answer 7

HTML：您可以为图片添加额外的css类

<img src="/img/car1.png" class="Dealer dealer-left "/>

的CSS

.dealer-left {padding-left :0px;}

如何在容器的第一个子元素中选择嵌套元素？

7 个答案: