在CSS中結合html類來簡化設計？

Question

我在web開發一個新手，我有一些類的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; 
} 

Answer 2

您需要添加單獨的規則，每個跨度， 例如：

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

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

Answer 3

我認爲你需要這個，問題是你.hold.roll span或.hold,.roll span是不能接受的，也是應該的.hold span,.roll span

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

<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>

Answer 4

您還可以添加一個以上的類的對象，可以說你有你的CSS文件中的兩個類：

.default-padding {padding:6px} 
.button {background:#c00;} 

<input type="button" class="default-padding button"></button> 
<label class="default-padding">Label</label> 

Answer 5

您可以組合多個選擇器，但所有選擇器都必須完全定義。這裏有一篇關於這個問題的好文章：Grouping Multiple CSS Selectors。

這是你在找什麼：

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