大佬教程收集整理的这篇文章主要介绍了根据类“范围”分配CSS属性,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
<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>@H_874_4@现在,这里出现了“怪异”部分:类名后面的数字(即:150,10和142)实际上是最大值.文本字段接受的字符数,它给我一个关于文本字段应该呈现的宽度的“提示”:宽150,短10;由于这个数字变化很大(用户通过调用Web服务来定义用户),因此使用“n”类来遵守所有可能的值是不切实际的. @H_874_4@所以:有没有办法建立一个“远程类”或类似的东西 – 请记住,从理论上讲,我无法改变Web服务提供的任何内容,而且我真的不想用javascript来评估事物? @H_874_4@具体来说,有没有办法声明这样的东西(我知道它有点疯狂):
.txtField1 ... .txtField50 { width: 50px; } .txtField50 ... .txtField100 { width: 80px; } .txtField100 ... .txtField150 { width: 120px; }@H_874_4@(我如何在脑海中读到这个:“对于任何类别txtField,范围从1到50,使用50px宽度……等等) @H_874_4@谢谢你的帮助.我知道这是一个很长的镜头,我最好的选择是使用javascript,但是,嘿,我不得不问;-)
/* 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; }
以上是大佬教程为你收集整理的根据类“范围”分配CSS属性全部内容,希望文章能够帮你解决根据类“范围”分配CSS属性所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。