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