根据类“范围"分配 CSS 属性.

2022-01-10 00:00:00 class css-selectors css

我有一些 HTML 代码需要设置样式，这些代码由 Web 服务自动生成.我得到的部分代码如下所示:

I have some HTML code I need to style that is being automatically generated by a web service. Part of the code I'm given looks something like this:

<input type='text' id='txtField001' class='txtField150'>foo</input>    
<input type='text' id='txtField002' class='txtField10'>bar</input>
<input type='text' id='txtField001' class='txtField142'>sum</input>

现在，奇怪"的部分来了:类名后面的数字(即:150、10 和 142)实际上是最大值.文本字段接受的字符数，它给了我一个关于文本字段应该呈现多宽的提示":150 宽，10 短；因为这个数字变化很大(它是由调用 Web 服务的用户定义的)，让n"个类符合所有可能的值是不切实际的.

Now, here comes the "weird" part: the numbers that follow the class name (i.e.: 150, 10 and 142) are, in fact, the max. number of characters the text field accepts, slo it gives me a "hint" as to how wide the text field should render: wide for 150, shorter for 10; since this number varies wildly (it's user defined by whomever is calling the web service) it is not practical to have "n" classes to comply with all possible values.

那么:有没有办法拥有一个范围类"或类似的东西 - 请记住，理论上，我无法更改 Web 服务提供的任何内容，而且我真的不想用javascript?

So: is there a way to have a "ranged class" or something like that - keeping in mind that, theoretically, I cannot change whatever the web service is delivering, and that I don't really want to evaluate things with javascript?

具体来说，有没有办法声明这样的事情(我知道这有点疯狂):

Concretely, is there any way to declare something like this (I know it's somewhat wild):

.txtField1 ... .txtField50 {
    width: 50px;
}

.txtField50 ... .txtField100 {
    width: 80px;
}

.txtField100 ... .txtField150 {
    width: 120px;
}

(我在脑海中是如何阅读的:对于从 1 到 50 的任何类 txtField，使用 50px 宽度......等等)

(how I'm reading this in my mind: "for any class txtField ranging from 1 to 50, use a 50px width... and so on)

感谢您的帮助.我知道这是一个很长的机会，我最好的选择是使用 javascript，但是，嘿，我不得不问 ;-)

Thanks for any help. I know it's a long shot, and that my best option is to use javascript, but hey, I had to ask ;-)

推荐答案

是的，有限制

我一直在思考一个类似于 cimmanon 的解决方案，只是我知道它需要比这更精细(这就是为什么需要一些时间来回答的原因).

Yes, with Limits

I have been pondering a solution that is similar to cimmanon's, only I knew it needed to be far more refined than that (which is why it has taken some time to answer).

让我先声明一下，这可能需要一个实际的限制(我不知道在您的情况下是否有字符数限制).你可以在我的小提琴示例中看到，任何 300+ 都无法解决到更大的尺寸.如果存在上限或未知上限，那么 javascript 确实是您的最佳解决方案.我的示例适用于少于 300 个，并且可能使用不多的代码就可以制作多达 999 个.但是1000+我认为是不合理的.

Let me state up front that this probably needs a practical limit (I don't know if there is a limit on the number of characters that it can be in your situation). As you can see in my example fiddle, anything 300+ fails to resolve to larger sizes. If there is a high or unknown upper limit, then javascript is really going to be your best solution. My example works for less than 300, and perhaps up to 999 could be made with not too much more code. But 1000+ I think would be unreasonable.

CSS

/* set default as small size */
[class ^= "txtField"] {
    width: 50px;
}

/* weed out 50-99, making sure not to get 5-9 */
[class *= "d5"]:not([class $= "d5"]),
[class *= "d6"]:not([class $= "d6"]),
[class *= "d7"]:not([class $= "d7"]),
[class *= "d8"]:not([class $= "d8"]),
[class *= "d9"]:not([class $= "d9"])
{
    width: 80px;
}

/* weed out 100-199, making sure not to get 1 or 10-19
   NOTE: this becomes a highly specific selector
*/
[class *= "d1"]:not([class $= "d1"]):not([class $= "d10"]):not([class $= "d11"]):not([class $= "d12"]):not([class $= "d13"]):not([class $= "d14"]):not([class $= "d15"]):not([class $= "d16"]):not([class $= "d17"]):not([class $= "d18"]):not([class $= "d19"])
{
    width: 120px;
}

/* weed out 150-199, making sure not to get 15-19
   NOTE: because the previous selector is so specific, this one
   needed the !important flag (which I hate to use, but here
   seemed to be the best and only solution)
*/
[class *= "d15"]:not([class $= "d15"]),
[class *= "d16"]:not([class $= "d16"]),
[class *= "d17"]:not([class $= "d17"]),
[class *= "d18"]:not([class $= "d18"]),
[class *= "d19"]:not([class $= "d19"])
{
    width: 150px !important;
}

/* weed out 200-299, making sure not to get 2 or 20-29
   NOTE: again high specificity
*/
[class *= "d2"]:not([class $= "d2"]):not([class $= "d20"]):not([class $= "d21"]):not([class $= "d22"]):not([class $= "d23"]):not([class $= "d24"]):not([class $= "d25"]):not([class $= "d26"]):not([class $= "d27"]):not([class $= "d28"]):not([class $= "d29"])
{
    width: 180px;
}

/* weed out 250-299, making sure not to get 25-29
   NOTE: !important needed again;
   also, anything 300+ reverts back to smallest size unless
   one keeps going... maybe 999 could be reached "reasonably"
*/
[class *= "d25"]:not([class $= "d25"]),
[class *= "d26"]:not([class $= "d26"]),
[class *= "d27"]:not([class $= "d27"]),
[class *= "d28"]:not([class $= "d28"]),
[class *= "d29"]:not([class $= "d29"])
{
    width: 210px !important;
}

相关文章