Question

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

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

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

类似的东西：

.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

Answer 2

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

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

用于类和属性的CSS选择器

2 个答案: