自定义数据属性的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]开头。

演示