根据类“range”指定CSS属性 [英] Assign CSS attributes according to class "range"
问题描述
我有一些HTML代码，我需要的风格是由Web服务自动生成的。我给出的部分代码看起来像这样：
< 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>
现在，这里有怪异部分：类名后面的数字，10和142），事实上，文本字段接受的字符数，slo它给我一个提示文本字段应该呈现的宽度：宽为150，短为10;因为这个数字变化很大（它是由调用Web服务的任何人定义的），因此使n个类符合所有可能的值是不切实际的。
：有一种方法有一个远程类或类似的东西 - 记住，理论上，我不能改变任何Web服务提供，我不真的想用javascript评估的东西？
具体来说，是否有任何方式来声明这样的东西（我知道它有点荒谬）：
.txtField1 ... .txtField50 {
width：50px;
}
.txtField50 ... .txtField100 {
width：80px;
}
.txtField100 ... .txtField150 {
width：120px;
}
（我如何读取这个在我心中：对于任何类txtField从1到50，使用50像素宽... ...）
感谢任何帮助，我知道这是一个长镜头，使用javascript，但嘿，我不得不问; - ）
是的，有限制
我一直在思考一个类似于cimmanon的解决方案，只有我知道它需要比这更精致（这是为什么它需要一些时间来回答）。
让我先说明这可能需要一个实际的限制（我不知道是否有字符数限制您的情况）。 正如您在我的示例中可以看到的 ，任何300 +无法解析为更大的大小，如果有一个高的或未知的上限，那么javascript是真的是你最好的解决方案。我的示例工作小于300，也许高达999可以做，没有太多码。
/ * set default as small size * /
[class ^ =txtField] {
width：50px;
}
/ *删除50-99，确保不会得到5-9 * /
[class * =d5]：not（[class $ = d5]，
[class * =d6]：not（[class $ =d6]），
[class * =d7]：not（[class $ = d7]，
[class * =d8]：not（[class $ =d8]） d9]）
{
width：80px;
}
/ *砍掉100-199，确保不会得到1或10-19
注意：这成为一个高度特定的选择器
* /
[class * =d1]：not（[class $ =d1]）：not（[class $ =d10]）：not（[class $ =d11]）：not [class $ =d12]）：not（[class $ =d13]）：not（[class $ = $ =d16]）：not（[class $ =d17]）：not（[class $ =d18]）：not（[class $ =d19]）
{
width：120px;
}
/ *删除150-199，确保不会得到15-19
注意：因为上一个选择器是如此具体，这一个
需要！重要标志（我讨厌使用，但这里
似乎是最好的和唯一的解决方案）
* /
[class * =d15]：not（[class $ =d15]，
[class * =d16]：not（[class $ =d16]），
[class * =d17]：not =d17]，
[class * =d18]：not（[class $ =d18]），
[class * =d19]：not =d19]）
{
width：150px！important;
}
/ * weed out 200-299，确保不要得到2或20-29
注意：再次高特异性
* /
[class * =d2]：not（[class $ =d2]）：not（[class $ =d20]）：not（[class $ =d21]）：not =d22]）：not（[class $ =d23]）：not（[class $ = d26]）：not（[class $ =d27]）：not（[class $ =d28]）：not（[class $ =d29]）
{
width ：180px;
}
/ *退出250-299，确保不会得到25-29
注意：！
也，任何300+回复到最小的大小，除非
一个继续...也许999可以达到合理
* /
[class * =d25 ]：
[class * =d26]：not（[class $ =d26]），
[ ]：
[class * =d28]：not（[class $ =d28]），
[ ]：not（[class $ =d29]）
{
width：210px！important;
}
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>
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.
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;
}
(how I'm reading this in my mind: "for any class txtField ranging from 1 to 50, use a 50px width... and so on)
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 ;-)
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).
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;
}
这篇关于根据类“range”指定CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
