CSS优先级问题

今天遇到一个较为奇怪的css选择器问题,主要是利用两个伪类选择器进行表格样式的设置。
下面的代码我是开始的,按照一般思路,自然是希望鼠标指向的优先级最高,起初我没有用important。加上important后下面的两行代码生效了,但是上面的两行依然不正确。
由于本身就不太懂CSS的优先级于是逐一尝试,尝试在tr:hover前面加上table也均不见效。

#content tr:hover{color:#00f !important}
#content td:nth-of-type(even){color: #111;}

#content td:hover{background:#CADBEC !important}
#content tr:nth-of-type(odd) td { background: #f2f7fc; }

正准备去掉这个效果时,然后发一个stack overflow,或者报Chrome的bug。然而测试发现IE 11和Firefox也是同样的效果,于是这显然是某种标准了,即使错误,也应该是一种CSS标准意义的了。仔细观察发现重点了,之前都一直在想color和background的表现怎么不一样,而忽略了tr后面自然接了一个td,于是找到了问题的关键。加了一个td之后一切就如所需要的了,鼠标指向优先级最高(当然不能高过内嵌的)。
正确代码如下,虽然尝试出来不过比较费解的是td td这种是不是嵌套表格的事儿!不管它了,有空再研究下CSS的四维优先级。

#content tr:hover{color:#00f !important}
#content td:nth-of-type(even) td{color: #111;}

#content td:hover{background:#CADBEC !important}
#content tr:nth-of-type(odd) td { background: #f2f7fc; }

本文链接:CSS优先级问题

转载声明:本站文章若无特别说明,皆为原创,转载请注明来源:Rexdf,谢谢!^^


此条目发表在网站建设分类目录,贴了标签。将固定链接加入收藏夹。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

:zsmilebig: :zsadbig: :zwiredbig: :zgreenhappy: more »

This site uses Akismet to reduce spam. Learn how your comment data is processed.