html – 自定义数据属性的CSS选择器?

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

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

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

最佳答案
你会想要使用

[data-favorite="1"] {}

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

这是工作jsFiddle

转载注明原文:html – 自定义数据属性的CSS选择器? - 代码日志