html - 编写一个 css3 规则以匹配第 2 个子元素 N

Question

给定以下 html 块

<div><span></span><span></span><span></span>
    <div><span></span><span></span><span></span></div>
</div>​

和这个CSS

span {
    display: inline-block;
    width: 70px;
    height: 50px;
}
div > div > span { visibility: hidden; }
span:not(:first-child) { margin-left: 5px; }
span:first-child {background-color: red;}
span:nth-child(2) {background-color: green;}
span:nth-child(3) {background-color: blue;}

span:nth-child(1):hover ~ div span:nth-child(1),
span:nth-child(2):hover ~ div span:nth-child(2),
span:nth-child(3):hover ~ div span:nth-child(3)
{ visibility: visible; }
​

您能否使用一些智能 css 重写最后一条规则，以便无论有多少个 div，它始终使您当前悬停在外部的 N 的内部 div 中的第 n 个孩子可见？

这个小提琴中的演示http://jsfiddle.net/E34ay/3/

换句话说，我想要类似的东西：

span:nth-child(N):hover ~ div span:nth-child(N) { visibility: visible; }

但它只会匹配已经匹配的 N 而不是所有的孩子（第一个 N = 第二个 N）

这是一个画廊，将像这样http://jsfiddle.net/2zFsf/

Answer 1

在这种情况下，单独的 CSS 不足以完成您想做的事情，SASS（或 SCSS）真的可以帮助您。

使用@forcontrol 指令，就像改变一个数字来放大一样简单：

@for $i from 1 through 3 {
  span:nth-child(#{$i}):hover ~ div span:nth-child(#{$i}) { 
      visibility: visible; 
  }
}

哪个编译为您的确切 CSS。将 3 更改为您计划拥有的跨度。

演示