CSS3 - 具有多个数据属性的目标元素

Question

我有以下HTML

<ul>
   <li data-facet="categories" data-value="full-time">1</li>
   <li data-facet="attendance" data-value="full-time">2</li>
</ul>

我需要使用 data-facet="categories" 和 data-value="full-time"

定位列表项

我试过以下方法：

li[data-facet="categories"]+[data-value="full-time"]{
   background-color: #ee2d24;
}

但这没有用。由于某种原因，它改变了考勤列表项的背景颜色：/

Answer 1

只是链接属性，中间没有空格或其他符号

li[data-facet="categories"][data-value="full-time"]{
   background-color: #ee2d24;
}

示例：http://codepen.io/anon/pen/GJRWvW

Answer 2

如前所述，只需将两个属性选择器链接在一起，不要将它们分开，就像将属性类或 ID 链接到类型选择器的方式一样：

li[data-facet="categories"][data-value="full-time"]

For some reason it changed the background colour of the attendance list item :/

那是因为+实际上选择了下一个兄弟元素，也就是也由[data-value="full-time"]表示，分别来自 li[data-facet="categories"]。将它们隔开并添加其他隐含的通用选择器使这更清楚一点：

li[data-facet="categories"] + *[data-value="full-time"]

每个元素对应的选择器如下：

<li data-facet="categories" data-value="full-time">1</li> <!-- li[data-facet="categories"] -->
<li data-facet="attendance" data-value="full-time">2</li> <!-- [data-value="full-time"] -->

CSS3 - 具有多个数据属性的目标元素

CSS3 - target elements with more than one data attribute

css

css-selectors