样式继承权重与锚记的伪类 :hover的一个例子

a {
	color: #222222;
	text-decoration: none;
}

a:hover {
	color: #333333;
	text-decoration: underline;
}

上面的例子定义了锚记的两种状态。鼠标不在其上时没有下划线,当移动到其上时则有下划线。

如果又定义了一个样式为:

a#abc{
      text-decoration: none;
}

那么你会发现当鼠标移动到id=”abc”这个锚记上时,并没有出现下划线。

这并没有什么好奇怪的,这是个很好的例子。

选择子“a#abc”的权重显然比选择子“a”和”a:hover”高,那么当移动到id=”abc”这个锚记上时,就会应用“a#abc”样式而不是”a:hover”样式。当然此时如果有”a#abc:hover”则会应用它,因为此时(鼠标在其上)它的权重更高。


此文纯属烂笔头。


Total views.

© 2013 - 2018. All rights reserved.

Powered by Hydejack v6.6.1