Question

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

Answer 1

在多个选择符应用于同一个元素上那么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{/*权重为[0,0,1]*/ color:#00f; background-color:#ff0;}a:hover{/*权重为[0,1,1]*/ color:#ff0; background-color:#00f;}蓝色字，黄色背景，鼠标悬停的时候颜色颠倒接下来，在添加规则12345pa.cl1{/*权重为[0,1,2]*/ 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{/*权重为[0,2,1]*/ color:#f00; background-color:#0ff;}红色字，浅绿色背景，权重为[0,2,1],比第一条规则”normal”和”hover”都要高现在在IE6下不管是”normal”还是”hover”的值都被覆盖了,这时候权重[0,2,1]完全覆盖了权重[0,1,1]12345divp:hover{/*权重为[0,1,2]*/ 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{/*权重为[0.1.1]*/ color:#c00;}div.c12{/*权重为[0.1.1]*/ color:#090;}el.class(red),el.class(green) (错误显示IE67/Win,IE/MacandOp7-显示为红色)如果顺序换过来el.class(red),el.class(green)，就是正确的了1234567div.c24{/*权重为[0.1.1]*/ color:#009900;}.c23p{/*权重为[0.1.1]*/ color:#CC0000;}.classel(red),el.class(green) (错误显示IE67/Win,IE/MacandOp7-显示为红色)如果顺序换过来el.class(red),.classel(green)，就是正确的了1234567div#c28{/*权重为[1.0.1]*/ color:#009900;}#c27p{/*权重为[1.0.1]*/ color:#CC0000;}#idel(red),el#id(green) (错误显示IE67/Win,IE/MacandOp7-显示为红色)如果顺序换过来el#id(red),#idel(green)，就是正确的了:first-letter使用的比较少，这个例子就不写了12345678p.c31{/*权重为[0.1.1]*/ color:#c00;/*red*/}bodyp.c31{/*权重为[0.1.2]*/ color:#090;/*green*/ color:miao; /*故意的错误*/}在IE67下会错误显示红色演示地址：其他权重错误