类和属性的CSS选择器

Question

我目前在网页上有几个带有.continue类的按钮，结构如下：

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

每个继续按钮都有不同的"数据部分"值，并且在网页上的不同背景下放置。我想知道是否有一种方法可以针对其中一个具有特定data-section值的继续按钮div，并更改匹配按钮的样式。

类似于：

.continue:data-section=1{
//css that styles button with data-section1
}
.continue:data-section=2{
//css that styles button with data-section2
}

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

Answer 1

使用属性选择器：

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

示例：

div {
width: 100px;
height: 100px;
background: blue;
display: inline-block;
margin: 5px;
}
.continue[data-section="2"] {
background: red;
}
/*We can combine this selector with other selectors as we normally would:*/
.continue[data-section="2"]:hover {
background: yellow;
}

<div class="continue" data-section="1"></div>
<div class="continue" data-section="2"></div>
<div class="continue" data-section="3"></div>
<div class="continue" data-section="4"></div>
<div class="continue" data-section="5"></div>

阅读有关MDN的更多信息