html - 在css中为自定义数据属性分配优先级

Question

这似乎超级基本，但我正在尝试为包含自定义数据值的 HTML 元素创建 css 优先级。该值用于需要修改核心样式的罕见上下文。我无法成功地将 id 与数据选择器结合起来。这甚至可能吗？

关于如何创建优先级的任何<div #id="x">指导<div id="x" data-value="y">？

谢谢

Answer 1

您可以在 CSS 规则中使用属性的存在：

#x {
    /* default CSS here */
}

#x[data-value] {
    /* CSS for items with the attribute here */
}

请参阅此处以供参考。

但是，如果这两个元素都存在于同一页面中，您可能会遇到问题，因为页面中应该只有一个具有给定 ID 的对象，因此您可能需要转而使用类而不是 id。

工作演示：http: //jsfiddle.net/jfriend00/nCD3m/