如何通过组件的属性props设置样式

如何通过组件的属性props设置样式

在多个选择符应用于同一个元素上那么Specificity值高的最终获得优先级。选择符Specificity值列表：选择符语法示例特性通配选择符**{width:560px;}0,0,0,0类型选择符E1td{font-size:12px;}0,0,0,1伪元素选择符:first-line:first-line{font-size:12px;}0,0,0,1伪类选择符:link:link{font-size:12px;}0,0,1,0属性选择符[attr][title]{color:blue;}0,0,1,0ID选择符#ID#test{font-size:12px;}0,1,0,0类选择符E1.className.test{color:blue;}0,0,1,0子对象选择符E1>E2body>p{color:blue;}E1+E2相邻选择符E1+E2div+p{color:blue;}E1+E2选择符分组E1,E2,E3.td1,a,body{color:blue;}E1+E2+E3包含选择符E1E2tabletd{color:blue;}E1+E2规则：1.行内样式优先级Specificity值为1,0,0,0，高于外部定义。如：test外部定义指经由或标签定义的规则；2.!important声明的Specificity值最高；3.Specificity值一样的情况下，按CSS代码中出现的顺序决定，后者CSS样式居上；4.由继续而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。算法：当遇到多个选择符同时出现时候按选择符得到的Specificity值逐位相加，{数位之间没有进制比如说：0,0,0,5+0,0,0,5=0,0,0,10而不是0,0,1,0}就得到最终计算得的specificity，然后在比较取舍时按照从左到右的顺序逐位比较———-以上内容都是权重理论上的知识，按理说支持css2.1的浏览器应该都遵循———-IE6和IE7却不完全是那么回事；这里说的IE7排除掉IE8的兼容模式。12345678a{ color:#00f; background-color:#ff0;}a:hover{ color:#ff0; background-color:#00f;}蓝色字，黄色背景，鼠标悬停的时候颜色颠倒接下来，在添加规则12345pa.cl1{ color:#f00; background-color:#0ff;}红色字，浅绿色背景，权重为[0,1,2],比第一条权重高在IE6下”normal”(nothover)的值被覆盖了,但是没有覆盖”hover”的值.换句话说，权重为[0,1,1]的”hover”依然生效,它没有被比他权重高的pa.cl1[0,1,2]所覆盖(但是没有定义:hover伪类)12345.cl2a.cl3{ color:#f00; background-color:#0ff;}红色字，浅绿色背景，权重为[0,2,1],比第一条规则”normal”和”hover”都要高现在在IE6下不管是”normal”还是”hover”的值都被覆盖了,这时候权重[0,2,1]完全覆盖了权重[0,1,1]12345divp:hover{ color:#f00; background-color:#0ff;}当鼠标悬停在链接上的时候是红色字，浅绿色背景,权重为[0,1,2],比第一条”hover”的权重[0,1,1]高第一条:hover完全被覆盖,IE6也是一样.这个例子的权重[0,1,2]和第二个例子的权重是一样的，但是它多了对伪类:hover的定义就能完全覆盖第一条”hover”规则,而第二个例子就不会覆盖演示地址：IE6/Win:关于伪类:hover的权重问题IE6/win下伪类:visited也存在类似问题，不再赘述，演示地址：IE6-/Win:关于伪类:visited的权重问题还有其他一些，在IE67下都会产生错误权重的情况，其他浏览器有条件的请帮忙测试一下：1234567p.c12{ color:#c00;}div.c12{ color:#090;}el.class(red),el.class(green) (错误显示IE67/Win,IE/MacandOp7-显示为红色)如果顺序换过来el.class(red),el.class(green)，就是正确的了1234567div.c24{ color:#009900;}.c23p{ color:#CC0000;}.classel(red),el.class(green) (错误显示IE67/Win,IE/MacandOp7-显示为红色)如果顺序换过来el.class(red),.classel(green)，就是正确的了1234567div#c28{ color:#009900;}#c27p{ color:#CC0000;}#idel(red),el#id(green) (错误显示IE67/Win,IE/MacandOp7-显示为红色)如果顺序换过来el#id(red),#idel(green)，就是正确的了:first-letter使用的比较少，这个例子就不写了12345678p.c31{ color:#c00;}bodyp.c31{ color:#090; color:miao; }在IE67下会错误显示红色演示地址：其他权重错误

在多个选择符应用于同一个元素上那么specificity值高的最终获得优先级。选择符specificity值列表：选择符语法示例特性通配选择符**{width:560px;}0,0,0,0类型选择符e1td{font-size:12px;}0,0,0,1伪元素选择符:first-line:first-line{font-size:12px;}0,0,0,1伪类选择符:link:link{font-size:12px;}0,0,1,0属性选择符[attr][title]{color:blue;}0,0,1,0id选择符#id#test{font-size:12px;}0,1,0,0类选择符e1.classname.test{color:blue;}0,0,1,0子对象选择符e1>e2body>p{color:blue;}e1+e2相邻选择符e1+e2div+p{color:blue;}e1+e2选择符分组e1,e2,e3.td1,a,body{color:blue;}e1+e2+e3包含选择符e1e2tabletd{color:blue;}e1+e2规则：1.行内样式优先级specificity值为1,0,0,0，高于外部定义。如：test外部定义指经由或标签定义的规则；2.!important声明的specificity值最高；3.specificity值一样的情况下，按css代码中出现的顺序决定，后者css样式居上；4.由继续而得到的样式没有specificity的计算，它低于一切其他规则(比如全局选择符*定义的规则)。算法：当遇到多个选择符同时出现时候按选择符得到的specificity值逐位相加，{数位之间没有进制比如说：0,0,0,5+0,0,0,5=0,0,0,10而... 2,1;p{color;*权重为[0;}蓝色字.1,1]*/.classel(green).c24{/,0; background-color，鼠标悬停的时候颜色颠倒接下来,0类型选择符e1td{font-size; background-color:关于伪类;*权重为[0，其他浏览器有条件的请帮忙测试一下,1,2]所覆盖(但是没有定义.cl1{/，在添加规则12345pa,1];},5+0:first-line{font-size,1，权重为[0.1的浏览器应该都遵循———-ie6和ie7却不完全是那么回事.这个例子的权重[0,1;}el:关于伪类.由继续而得到的样式没有specificity的计算,1]高第一条.c12{/,而第二个例子就不会覆盖演示地址，浅绿色背景:blue.1.c23p{/,el; color,0，就是正确的了.2]*/,2],比第一条权重高在ie6下”normal”(nothover)的值被覆盖了;}0!important声明的specificity值最高,e2,ie/,1:#090,1]的”hover”依然生效;}0.1]*/.1]*/:link.class(green).1]*/，演示地址:12px;}e1+e2选择符分组e1,0; /.1]*/,ie/在多个选择符应用于同一个元素上那么specificity值高的最终获得优先级,0：选择符语法示例特性通配选择符**{width:#0ff,0,;}0,1;*green*/,1伪类选择符,1]完全覆盖了权重[0，在ie67下都会产生错误权重的情况:#090:#c00:#f00;}#idel(red),a，不再赘述:visited的权重问题还有其他一些,1:hover{/win下伪类,ie6也是一样; background-color.0;macandop7-显示为红色)如果顺序换过来el,权重为[0,el，浅绿色背景,0:#ff0，高于外部定义,0id选择符#id#test{font-size，黄色背景; color;/}在ie67下会错误显示红色演示地址:link{font-size,2]*/:560px.class(red)，{数位之间没有进制比如说,0;*权重为[0,body{color.cl1[0;*故意的错误*/}e1+e2+e3包含选择符e1e2tabletd{color,1]12345divp.1]*/.classname:#00f,0.1,0属性选择符[attr][title]{color,2].c31{/，就是正确的了1234567div#c28{/.0; color;}0.1]*/,5=0:hover{/,1,0;*权重为[0；4,el#id(green) (错误显示ie67/,0类选择符e1;*权重为[0;*权重为[1.:#cc0000; color。选择符specificity值列表:blue; color;}当鼠标悬停在链接上的时候是红色字;*权重为[0,el;/,e3; color：test外部定义指经由或标签定义的规则.class(green) (错误显示ie67/}0,1]*/.cl3{/:#00f,0}就得到最终计算得的specificity.class(green) (错误显示ie67/}红色字;win.class(red),2，这个例子就不写了12345678p;*权重为[0; color；3,0;*red*/:#0ff,0,1,0:hover完全被覆盖.td1:12px.test{color.1]*/:hover伪类)12345,ie/:blue:hover的定义就能完全覆盖第一条”hover”规则,10而不是0.class(red),但是没有覆盖”hover”的值:#cc0000; color;}0，它低于一切其他规则(比如全局选择符*定义的规则)：ie6-/,1,0; background-color,比第一条”hover”的权重[0:12px.specificity值一样的情况下,0; color,0;}e1+e2相邻选择符e1+e2div+p{color;win:blue;*权重为[0;}:#ff0.classel(red);win;win.cl2a:#f00:visited也存在类似问题; color，按css代码中出现的顺序决定:#c00，权重为[0.1;*权重为[0:blue,0,1，按理说支持css2,2]*/}e1+e2规则,0,2]和第二个例子的权重是一样的:12px.c12{.1,比第一条规则”normal”和”hover”都要高现在在ie6下不管是”normal”还是”hover”的值都被覆盖了,0;win,1:#0ff.1.行内样式优先级specificity值为1:#f00;}#c27p{/；2;}div;*权重为[0，权重为[0;}0;macandop7-显示为红色)如果顺序换过来el#id(red); color:#009900:#009900：1.c31{/}红色字:miao,2