自定义数据属性的CSS选择器？

Question

为什么我的明星没有出现在黄色？怎么解决？

以下是上述问题的相关代码.

HTML

<div class="tpl" data-favorite="1">
  <div>
    <span class="favorite">?</span>
    <span class="text">Italian Pizza: salmon, olives, onion, tomato, blue-cheese</span>
  </div>
</div>

CSS

[data-favorite=1] {
    background: #AAA;
    border-left: 3px solid green
}
.favorite {
    font-size: 2em;
    padding: 0 1 0 1em;
}
[data-favorite=1] .favorite {
    color:yellow;
}
[data-favorite=0] .favorite {
    color:#AAA;
}

小提琴

Answer 1

你会想要使用

[data-favorite="1"] {}

不同之处在于值周围的引号"".

这是工作的jsFiddle

Answer 2

您需要使用"属性值

[data-favorite="1"] {
   /* Styles goes here */
}

演示

为什么会这样？

CSS规范 - 6.3.属性选择器

属性值必须是CSS 标识符^[1]或字符串. [CSS21]选择器中属性名称和值的区分大小写取决于文档语言.

身份标识

^[1]在CSS中,标识符(包括选择器中的元素名称,类和ID)只能包含字符[a-zA-Z0-9]和ISO 10646字符U + 00A0及更高,加上连字符( - )和下划线(_); 它们不能以数字,两个连字符或连字符后跟数字开头.标识符还可以包含转义字符和任何ISO 10646字符作为数字代码(请参阅下一项).例如,标识符"B&W？" 可以写成"B \&W \？" 或"B\26 W\3F".

所以问题是你的属性的值以数字开头,如果你的HTML中有这样的东西(你已经这样做了)

<span data-favorite="0">Color Me red</span>

[data-favorite=0] { color: red;}

工作

演示

但是,如果你有类似的东西

<span data-favorite="a0">Color Me red</span>

[data-favorite=a0] { color: red;}

将工作 (即使没有引号),因为属性的值以字母^[1]开头.

演示