在 css 样式表中仅修改 div 中具有相同 class 名称的一个 div

Question

我有以下代码：

<div class="more" style="display: block;">
    <div class="row">
        <h3></h3>
        <p>text<br/>
        <img width="556" height="400" src="/img/cms/1.png">
        <br></p>
    </div>
    <div class="row">content</div>
    <div class="row">content</div>
    <div class="row">content</div>
    <div class="row">content</div>
    <div class="row">content</div>
    <div class="row">content</div>
    <div class="row">content</div>
</div>

每次访问者按下特定按钮时，都会通过 JS 激活 class "more"。然后所有那些 div 将被显示；每一个都在同一个名字下 "row"。对于每个产品（每个产品包含多行 "more" div），第二行会有一个图像。

当网站将采用移动尺寸时，我必须调整图像大小并将宽度设置为 100% 或类似值。那很好用。所以我做了以下事情：

.more .row img {
    width: 100% !important;
    hight: auto;
}

问题是我在下一行中有一些图标被更改了，上面的 css 修改适用于属于 class [=25= 的所有图像]行 class 更多。所以图标非常大（参见宽度：100%）。有没有办法只在第二行应用该修改？我只需要在第二行调整图片大小（对于所有产品，需要调整大小的大图片在第二行。）。

我不确定是否可行，但我只是以防万一。它会节省我一些时间，并且对将来的用途非常有用。非常感谢。

Answer 1

您想使用 nth 选择器之一。

:nth-child(n)
:nth-last-child(n)
:nth-last-of-type(n)
:nth-of-type(n)

例如，p:nth-of-type(2) 选择每个 <p> 元素，即其 parent 的第二个 <p> 元素。您可以使用 this site 来确定哪些浏览器支持每个选择器。

或者，您可以向特殊元素添加另一个 class。

在 css 样式表中仅修改 div 中具有相同 class 名称的一个 div

Modify only one div among divs with same class name in css stylesheet

html

css

responsive-design

media-queries