html - css样式表中类名相同的div中只修改一个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 激活。然后将显示所有这些div；每一个都在同一个名字“行”下。对于每个产品(每个产品都包含多行的“更多”div)，第二行会有一个图像。

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

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

问题是我在下一行中有一些图标发生了变化，并且上述 css 修改适用于所有属于 row 类的图像 more 。所以图标非常大(参见宽度:100%)。有没有办法只在第二行应用该修改？我只需要调整第二行内的图片大小(对于所有产品，需要调整大小的大图片位于第二行。)。

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

Answer 1

您想使用 nth 之一选择器。

• :第n个 child (n)
• :第n个最后一个 child (n)
• :nth-last-of-type(n)
• :nth-of-type(n)

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

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