多个选择器+嵌套规则

Question

我有一些不像下面:

    .char2, .char3, .char5, .char6{
        display:inline-block;
        position:relative;
        &:hover{
        .text-shadow(@blueDark, 2px, 2px, 20px);
        bottom:0.1em;
        .transform(rotate(30deg));
        }
        .char6:hover{
        .transform(rotate(-30deg));
        }
    }

所以我想做的是样式char2-char6的悬停状态，但特别是对于char6，我想让悬停有一些小的额外的样式。

Thanks in advance

Answer 1

我认为你应该从char2-char6定义中删除char6:hover:

.char2, .char3, .char5, .char6{
        display:inline-block;
        position:relative;
        &:hover{
        .text-shadow(@blueDark, 2px, 2px, 20px);
        bottom:0.1em;
        .transform(rotate(30deg));
        }
    }
.char6:hover{
        .transform(rotate(-30deg));
        }

Answer 2

将您的.char6:hover代码移出.char2, .char3, .char5, .char6代码块，并从转换方法中删除前面的点:

.char2, .char3, .char5, .char6{
        display:inline-block;
        position:relative;
        &:hover{
        .text-shadow(@blueDark, 2px, 2px, 20px);
        bottom:0.1em;
        transform(rotate(30deg));
        }
    }
.char6:hover{
 transform(rotate(-30deg));
        }

我不熟悉&:hover嵌套语法，所以我相信你的话，它是有效的，直到我有机会研究。

Answer 3

找到了一个优雅的解决方案:

    .char2, .char3, .char5, .char6{
       display:inline-block;
       position:relative;
    &:hover{
       .text-shadow(@blueDark, 2px, 2px, 20px);
       bottom:0.1em;
       .transform(rotate(30deg));
    }
    &.char6:hover{
       .transform(rotate(-30deg));
    }
}

我自己的例子:http://codepen.io/juanbrujo/pen/sdApx