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;
}

Fiddle

Answer 1

你想要使用

[data-favorite="1"] {}

差异是围绕值的引号“”。

这是工作jsFiddle

Answer 2

您需要在属性值

周围使用"

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

Demo

为什么会这样？

CSS规范 - 6.3。属性选择器

属性值必须为CSS identifiers ^[1]或strings。 [CSS21]属性名称和值的区分大小写选择器取决于文档语言。

标识符

^[1]在CSS中，标识符（包括元素名称，类和ID）选择器）只能包含字符[a-zA-Z0-9]和ISO 10646 字符U + 00A0和更高，加上连字符（ - ）和下划线（_）; 他们不能以数字，两个连字符或连字符开头一个数字。标识符还可以包含转义字符和任何字符 ISO 10646字符作为数字代码（参见下一项）。例如，标识符“B＆amp; W？”可以写成“B \＆amp; W \？”或“B \ 26 W \ 3F”。

所以问题是你的属性值以数字开头，如果你在HTML （你已经做过）

中有这样的东西

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

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

WONT WORK

Demo

但是，如果你有像

这样的东西

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

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

将工作 （即使没有引号）因为您的属性值以字母^[1]开头。

Demo

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

2 个答案: