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修改适用于属于类更多类行的所有图像即可。所以图标非常大（见宽度：100％）。有没有办法只在第二行应用该修改？我只需要在第二行调整图片大小（对于所有产品，需要调整大图的是第二行。）

我不确定是否可能，但我只是要求以防万一。这将节省我一些时间，它将非常有用于未来的目的。非常感谢。

Answer 1

您想使用其中一个nth选择器。

：第n个孩子（n）的
：第n-最后子（n）的
：第n-最后的型（n）
：第n的型（n）

例如，p：nth-of-type（2）选择作为其父级的第二个<p>元素的每个<p>元素。您可以使用this site来确定哪些浏览器支持每个选择器。

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

在css样式表中只修改具有相同类名的div中的一个div

1 个答案: