css - 在 .css 中的 ID 中嵌套类？

Question

好的，这是我的 .css

.centerhex {
    background-image:url(http://i.imgur.com/4sZDtfK.png);
    height:224px;
    width:210px;
    position:absolute;
    opacity:0;
    transition:opacity 2s ease-in-out;
}
.transtart{
    opacity:0
}
@-webkit-keyframes fadein { 
    0%{opacity:0;}
    40%{opacity:1;}
    50%{opacity:1;}
    100%{opacity:0.05;} 
}
@keyframes fadein {
    0%{opacity:0;}
    40%{opacity:1;}
    50%{opacity:1;}
    100%{opacity:0.05;} 
}
.done{
    animation-delay:0.5s;
    -webkit-animation-delay:0.5s;
}
.fadein{    
    animation:fadein 0.65s;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
    animation-iteration-count:1;
    -webkit-animation-iteration-count:1;
    -webkit-animation:fadein 0.65s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes pulse { 
    0%{opacity:0.05;}
    10%{opacity:0.1;}
    100%{opacity:0.05;} 
}
@keyframes pulse {
    0%{opacity:0.05;}
    10%{opacity:0.1;}
    100%{opacity:0.05;} 
}
.pulse{ 
    animation:fadein 4s;
    animation-timing-function:linear;
    animation-fill-mode:forwards;
    animation-iteration-count:infinite;
    animation-delay:1s
    -webkit-animation-delay:1s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation:fadein 4s;
    -webkit-animation-timing-function:linear;
    -webkit-animation-fill-mode: forwards;
}

我很好奇的是，是否可以创建一个专门用于嵌套预定义类的id，例如:

#hexa.centerhex.transtart.fadein.done

到目前为止，这样做的实验都失败了..所以我不完全确定我做错了什么。

我的想法是，我将创建一些脚本，用另一个 ID 替换一个 ID。例如我会做:

#hexa.centerhex.transtart.fadein.done

变成:

#hexb.centerhex.transtart.pulse.done

Answer 1

您可以按照您的要求进行操作，但根据您输入的类的顺序，您似乎希望获得不切实际的结果。很遗憾，渲染不会根据您选择的选择器按特定顺序进行。

但是，如果计时有问题，可以使用 setTimeout() 使用 Javascript 相当轻松地完成此操作。

如果您不关心添加到每个 id 中的这些类的操作顺序，那么您应该能够随心所欲地执行此操作(并且成功率相当高因为 #id 仅被 !important 和客户端/浏览器设置所取代)。

不要忘记你的分号 :)