css - 第 nth-child 没有选择我图库中的特定图像

Question

我有一个画廊，我正在尝试使用 CSS 设置样式。具体来说，我正在尝试编写 CSS 来查找特定编号的 div，然后应用一个新的像素高度来覆盖默认高度。这是因为我有一些肖像图像需要更长的高度，而不是其他方形图像。

这是画廊的一个工作示例:

http://kylework.com/

这是我使用的 CSS 示例:

html body div#page_div div#page_content.full_width div.container_div  div#mainworkpanelsheet div.mainworkpanel div:nth-child(2)
{
height: 200px!important;
}

从上面的代码中，我只想设置第二个 div/图像的样式 - 而不是设置每个 gallery div 的样式。我也尝试过“div.mainworkpanel:nth-child(2)”(我认为哪个更准确？)，但这也没有任何作用。我还尝试通过 div[style="imageURL.jpg"] 通过其“背景图像”属性选择每个 div，但我似乎也无法让它工作。

我无法控制图库中 div 的 CSS 类 - 它们都是相同的(“mainworkpanelthumb”)。这个画廊是由 jquery 通过 XML 文件生成的。生成缩略图后，CSS 无法覆盖图像属性吗？

谢谢!

Answer 1

最短的选择器应该是这个(已测试):

div.mainworkpanel:nth-child(3) div.mainworkpanelthumb {
    background: red;
    height:1500px !important;
}

它选择库中的特定容器。在这个容器中，它设置了持有图像的 child 的高度。您需要使用 !important 以及所有这些容器都具有将覆盖 CSS 规则的内联样式。