我有一个包含两列的图库容器。我使用 jQuery 将多张照片附加到容器中。当我尝试在 div 容器或 img 标签上使用 nth-child(n) 时，没有任何反应。我不太确定自己做错了什么。
我也尝试过使用 nth-of-type，选择图像标签、div 标签、添加类和 ID 试图让它访问元素，但我每次都失败了。
HTML:
<body>
<div class="photos"></div>
</body>
Javascript:
$( ".photos" ).append(`<img class=\"diaryImage\" src=\"..url\">`);
CSS:
.photos {
line-height: 0;
-webkit-column-count: 2;
-webkit-column-gap: 0px;
-moz-column-count: 2;
-moz-column-gap: 0px;
column-count: 2;
column-gap: 0px;
margin-top:.5%;
background-color: transparent;
width: 80%;
margin-left: 16%;
height: auto;
overflow: auto;
}
.photos img {
width: 100% !important;
height: auto !important;
vertical-align: top;
}
.photos img:nth-child(even) {
width: 10%;
/* grid-column:2;*/
}
我也试过:
div.photos img:nth-child(even) {
width: 10%;
/* grid-column:2;*/
}
.photos:nth-child(even) {
width: 10%;
/* grid-column:2;*/
}
还有一些其他标签。我刚开始使用第 n 个子选择器，所以不能 100% 确定我做错了什么。
我只想对每一张照片产生任何影响。一旦我看到选择器工作，我就可以继续解决这个问题。我的最终目标是将每一张照片都放入第 2 列，但只是用 width:10%; 进行测试。查看代码是否有任何影响。
最佳答案
我看不到 :nth-child(even) 有问题，见下文，它按预期工作，您的问题来自 !important 的使用> 如@Trevin Avery 的其他回答所述。
此外，你为什么要逃避这个:
.append(`<img class=\"diaryImage\" src=\"..url\">`);
这个
.append(`<img class="diaryImage" src="${dynamic_url}" />`);
应该处理问题，不是吗？
.photos img:nth-child(even) {
outline: 1px solid red;
}<body>
<div class="photos">
<img src="https://via.placeholder.com/300x200?text=1" alt="" />
<img src="https://via.placeholder.com/300x200?text=2" alt="" />
<img src="https://via.placeholder.com/300x200?text=3" alt="" />
<img src="https://via.placeholder.com/300x200?text=4" alt="" />
<img src="https://via.placeholder.com/300x200?text=5" alt="" />
<img src="https://via.placeholder.com/300x200?text=6" alt="" />
<img src="https://via.placeholder.com/300x200?text=7" alt="" />
<img src="https://via.placeholder.com/300x200?text=8" alt="" />
</div>
</body>关于css - 第 n 个 child (甚至)不适用于我的 css 选择器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57227257/