Question

给出以下html块

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

这个css for it

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中的nth-child，你当前正在外面盘旋，无论有多少div？

这个小提琴演示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）可以真正帮助您。

使用@for control directive，就像更改一个数字以扩大规模一样简单：

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

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

Demo

写一个css3规则，用N匹配第2个子元素

1 个答案: