时间戳

首页 > 解决方案 > 用于类和属性的 CSS 选择器

css - 用于类和属性的 CSS 选择器

问题描述

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

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

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

就像是：

.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 动画的大量代码重复。

标签： cssstyles

解决方案

使用属性选择器：

.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

推荐阅读