类和属性的CSS选择器

我目前在网页上有几个带有

的按钮。continue

类，由以下代码构成：

<div class="continue" data-section="1">
    Continue
    <i class="fas fa-arrow-right" id="continueArrow1"></i>
</div>

---

显然，我总是可以给他们不同的ID，但这会导致JS和JQuery动画的大量代码重复

使用属性选择器：

.continue[data-section="1"] {
    ...
}

例如：

div{
宽度：100px；
高度：100px；
背景：蓝色；
显示：内联块；
保证金：5px；
}
.继续[data section=“2”]{
背景：红色；
}
/*我们可以像通常那样将此选择器与其他选择器组合：*/
.继续[data section=“2”]：悬停{
背景：黄色；
}

.continue[data-section="1"] {
    ...
}