CSS比较运算符 [英] CSS Comparison Operators

问题描述

我需要定位占用其父div的80％以上的div，用于进度条。考虑到我们可以使用CSS定位特定宽度：

I need to target divs that takes up more than 80% of their parent div, for a progress bar. Considering that we can target a specific width with CSS:

[data-width=80]

我们如何定位比较？这不是在Firefox或Chrome中使用：

How might we target a comparison? This did not work in Firefox or Chrome:

[data-width>=80]

google搜索 css比较运算符

请注意，我定位的是一个 data - * 属性当在Javascript中设置宽度。显然，我可以让JavaScript写一个 over80 类，并且目标，但有额外的问题，我需要在CSS中进行定位。由于一个原因，设计者的工作是决定在哪个宽度发生变化。另一个原因是我们定位的是多个设备，而不仅仅是桌面网络浏览器。

Note that I am targeting a data-* property, which I set together when setting the width in Javascript. Obviously I could just have the Javascript write an over80 class and target that, but there are additional concerns for which I need the targeting done in CSS. For one reason, it is the designer's job to decide at which width the change occurs. For another reason, we are targeting multiple devices, not just desktop web browsers.

这里是目标HTML和CSS：

Here is the target HTML and the 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不提供带有数字操作的属性选择器。

This is a frequently-asked question, but the answer remains the same: CSS does not provide attribute selectors with numeric operations.

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

None of the existing attribute selectors work with any sort of value semantic; they only look at values as raw strings, and so only rudimentary string-matching attribute selectors exist at most. The next Selectors specification, Selectors 4, does not appear to introduce any numeric value attribute selectors either, but since it's still in its early stages of development, you could propose this feature if you're able to provide some good use case examples.

在一个有点相关的注释，给定的例子 [data-width = 80] 无效，因为以数字开头的令牌在CSS中被解释为数值或维，而CSS属性选择器只接受值组件中的字符串或标识符，而不是数字或维度。如果这样的功能使它到选择器4，这个限制可以取消。

On a somewhat related note, the given example [data-width=80] is invalid precisely because tokens starting with a digit are interpreted in CSS as either numeric values or dimensions, and CSS attribute selectors only accept either a string or an identifier in the value component, not a number or dimension. If such a feature makes it to Selectors 4, this restriction may be lifted.

如果我们要谈论分离的问题，可以说，设置特别是为了RWD的目的，诸如 width 的表示值的数据属性本身是可疑的。对这个问题最合理的解决方案是元素查询，它还不存在（就我所知，这主要是因为它们难以正确实现）。

And if we're going to talk about separation of concerns, one could argue that setting a data attribute for a presentational value such as width, especially for the sake of RWD, is questionable in itself. The most sensible solution to this problem would be element queries, which don't exist as yet (as far as I've heard, it's primarily because they're difficult to implement correctly).

在这一点上，你最好的打赌是在JavaScript中，真的。

At this point, your best bet is in JavaScript, really.

这篇关于CSS比较运算符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！