在 css 样式表中仅修改 div 中具有相同 class 名称的一个 div
Modify only one div among divs with same class name in css stylesheet
我有以下代码:
<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%)。有没有办法只在第二行应用该修改?我只需要在第二行调整图片大小(对于所有产品,需要调整大小的大图片在第二行。)。
我不确定是否可行,但我只是以防万一。它会节省我一些时间,并且对将来的用途非常有用。非常感谢。
您想使用 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。
我有以下代码:
<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%)。有没有办法只在第二行应用该修改?我只需要在第二行调整图片大小(对于所有产品,需要调整大小的大图片在第二行。)。
我不确定是否可行,但我只是以防万一。它会节省我一些时间,并且对将来的用途非常有用。非常感谢。
您想使用 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。