html - 将 html 类结合到 css 中以便于设计？

Question

我是网络开发的新手，我有一个包含一些类的 HTML 文档，但是，在设计时我遇到了这些这是我的 HTML 文档片段:

  <button class="roll"><i class="ion-ios-loop"></i><span>Roll dice</span></button>
 <button class="hold"><i class="ion-ios-download-outline"></i><span>Hold</span></button>

我写了这样的 CSS:

.hold span{
    padding-left: 10px;
    transition: .2s;
}
.roll span{
    padding-left: 10px;
    transition: .2s;
}
.roll span:hover{
     padding-left: 20px;
}
.hold span:hover{
    padding-left: 20px;
}

但是，我试图像这样缩短它，但它不能正常工作:

.hold.roll span{
    padding-left: 10px;
    transition: .2s;
}

.hold.roll span:hover{
     padding-left: 20px;
}

也像这样:

.hold,.roll span{
    padding-left: 10px;
    transition: .2s;
}

.hold,.roll span:hover{
     padding-left: 20px;
}

关于 CSS 有什么我想念的吗？谢谢，为什么我的其他 2 个代码不起作用。 ?

Answer 1

这样给

.hold span,.roll span{
 padding-left: 10px;
 transition: .2s;
}

.hold span:hover,.roll span:hover{
 padding-left: 20px;
}

或者你也可以这样写

button span{
 padding-left: 10px;
 transition: .2s;
}

button span:hover{
 padding-left: 20px;
}