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"]

  

由于某种原因，它改变了出勤列表项目的背景颜色：/

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

li[data-facet="categories"]

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

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