問(wèn)題描述

我有一些 HTML 代碼需要設(shè)置樣式，這些代碼由 Web 服務(wù)自動(dòng)生成.我得到的部分代碼如下所示:

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>

現(xiàn)在，奇怪"的部分來(lái)了:類名后面的數(shù)字(即:150、10 和 142)實(shí)際上是最大值.文本字段接受的字符數(shù)，它給了我一個(gè)關(guān)于文本字段應(yīng)該呈現(xiàn)多寬的提示":150 寬，10 短；因?yàn)檫@個(gè)數(shù)字變化很大(它是由調(diào)用 Web 服務(wù)的用戶定義的)，讓n"個(gè)類符合所有可能的值是不切實(shí)際的.

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.

那么:有沒(méi)有辦法擁有一個(gè)范圍類"或類似的東西 - 請(qǐng)記住，理論上，我無(wú)法更改 Web 服務(wù)提供的任何內(nèi)容，而且我真的不想用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?

具體來(lái)說(shuō)，有沒(méi)有辦法聲明這樣的事情(我知道這有點(diǎn)瘋狂):

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;
}

(我在腦海中是如何閱讀的:對(duì)于從 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)

感謝您的幫助.我知道這是一個(gè)很長(zhǎng)的機(jī)會(huì)，我最好的選擇是使用 javascript，但是，嘿，我不得不問(wèn) ;-)

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 ;-)

推薦答案

是的，有限制

我一直在思考一個(gè)類似于 cimmanon 的解決方案，只是我知道它需要比這更精細(xì)(這就是為什么需要一些時(shí)間來(lái)回答的原因).

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).

讓我先聲明一下，這可能需要一個(gè)實(shí)際的限制(我不知道在您的情況下是否有字符數(shù)限制).你可以在我的小提琴示例中看到，任何 300+ 都無(wú)法解決到更大的尺寸.如果存在上限或未知上限，那么 javascript 確實(shí)是您的最佳解決方案.我的示例適用于少于 300 個(gè)，并且可能使用不多的代碼就可以制作多達(dá) 999 個(gè).但是1000+我認(rèn)為是不合理的.

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;
}

這篇關(guān)于根據(jù)類“范圍"分配 CSS 屬性.的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！