nth-child(even) 不适用于我的 CSS 选择器答案

【问题标题】：nth-child(even) not applying to my css selectorsnth-child(even) 不适用于我的 CSS 选择器
【发布时间】：2019-07-26 21:36:10
【问题描述】：

我有一个包含两列的画廊容器。我使用 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 列，但仅使用宽度：10% 进行测试；看看代码是否有任何影响。

【问题讨论】：

你能建立一个可运行的sn-p吗？使 FAR 故障排除变得更容易......
会的！我会尽快上传一个。

标签： css css-selectors

【解决方案1】：

我看不到: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>

【讨论】：

$( ".photos" ).append(<img class=\"diaryImage\" src=\"${temp_url}\">);道歉。这就是实际代码的样子。转义标签让我可以使用 ${} 轻松使用后端的图像源。
哦，显然它一直在工作。似乎出于某种原因，我无法覆盖宽度。我尝试了边界，它工作得很好。奇怪的！谢谢！
查看@Trevin Avery 的回答为什么你不能覆盖宽度，这是因为你使用!important

【解决方案2】：

问题是您在.photos img 中有!important。删除它，它将按预期工作。

!important 将覆盖所有其他试图设置该属性的样式，即使它们更具体，除非它们也有!important。这会阻止应用.photos img:nth-child(even) 中的新样式。

Here's the docs 和 here's a helpful tutorial。

【讨论】：

是的，他是对的，这正是为什么 !important 通常是个坏主意 =)！
尽可能避免!important！
哇，我不知道！非常感谢！你每天都会学到新东西。