CSS 比较运算符

我需要定位占其父 div 80% 以上的 div，作为进度条。考虑到我们可以瞄准specificCSS 宽度：

[data-width=80]

我们如何瞄准比较？这做到了not在 Firefox 或 Chrome 中工作：

[data-width>=80]

谷歌搜索一下css comparison operators令人惊讶的是没有发现任何有用或相关的东西。

请注意，我的目标是data-*属性，我在 Javascript 中设置宽度时一起设置的。显然我可以让 Javascript 写一个over80类和目标，但还有其他问题，我需要在 CSS 中完成目标。原因之一是，它是设计师的工作来决定变化发生的宽度。另一个原因是，我们的目标是多种设备，而不仅仅是桌面网络浏览器。

这是目标 HTML 和 CSS：

<div id='progress-bar-outer'>
    <div id='progress-bar-inner'><span id='percent-indicator'>60%</span></div>
</div>

#progress-bar-outer {
    overflow-y: auto;
    height: auto;
    border: #2072a7 solid 3px;
    position: relative;
}

#progress-bar-inner {
    float: left;
    height: 25px;
    background-color: #2072a7;
    width: 60%;
}

#progress-bar-inner[data-width<80] {
    position: relative;
}

#percent-indicator {
    position: absolute;
    top: 5px;
    right: 10px;
}

这是一个常见问题，但答案仍然是一样的：CSS 不提供带有数字操作的属性选择器。

现有的属性选择器都不适用于任何类型的值语义；它们只将值视为原始字符串，因此最多只存在基本的字符串匹配属性选择器。下一个选择器规范 Selectors 4 似乎也没有引入任何数值属性选择器，但由于它仍处于开发的早期阶段，您could如果您能够提供一些好的用例示例，请建议使用此功能。

在某种程度上相关的说明中，给出的示例[data-width=80]恰恰是无效的，因为以数字开头的标记在 CSS 中被解释为数值或维度，而 CSS 属性选择器仅接受值组件中的字符串或标识符，而不接受数字或维度。如果这样的功能出现在选择器 4 中，则此限制可能会被解除。

如果我们要讨论关注点分离，人们可能会认为为表示值设置数据属性，例如width，特别是对于RWD而言，其本身就值得怀疑。解决这个问题的最明智的解决方案是元素查询，但目前还不存在（据我所知，这主要是因为它们很难正确实现）。

在这一点上，你最好的选择是 JavaScript，真的。