css - 悬停在第 n 个 child 身上

Question

我想知道是否可以像这样对第 n 个 child 使用悬停

#gallery a img:hover {
    display: block;
    height:300px;
    width:450px;
    position:absolute;
    z-index:99;
    margin-left:-112.5px;
    margin-top:-75px;
    -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);

}

从这里到下面这样的东西，只有它不工作

 #gallery a img:hover:nth-child(1n+4) {
        display: block;
        height:300px;
        width:450px;
        position:absolute;
        z-index:99;
        margin-left:-112.5px;
        margin-top:-75px;
        -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
        -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);
        box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);

    }

Answer 1

#gallery a:hover:nth-child(1n+4)

将正常工作，但设置 A 标签的样式而不是内部的 IMG。

当你有像...这样的标记时

<a href="#"><img src=""/></a>
<a href="#"><img src=""/></a>
<a href="#"><img src=""/></a>
<a href="#"><img src=""/></a>
<a href="#"><img src=""/></a>

您不能选择内部 IMG 然后尝试在其上应用第 n 个子级，因为 A 标签内只有 1 个 IMG。

引用我创建的JSFIDDLE http://jsfiddle.net/fXS93/2/

IMG 标记包装方式的任何更改都将重置 CSS 匹配和 NTH-CHILD 计算。即使您在所有 IMG 共享的类上进行匹配，这也适用。

最新的 FF、Chrome 和 IE9 都是如此。