最好的解释方法是用一个例子来说明那的特性引起了你的困惑或则没有按照预期的显示。然后我们将近距离的细看计算实际的值来选择最优的选择器。
这是一个简单的例子 无序的列表:
<ul id="summer-drinks">
<li>Whiskey and Ginger Ale/li</li>
<li>Wheat Beer</li>
<li>Mint Julip</li>
</ul>
现在你想指定他们中间你最喜欢的酒并且把它的样式做一点变化,你需要通过这个列表元素上的一个类名来实现它。e
<ul id="summer-drinks">
<li class="favorite ">Whiskey and Ginger Ale/li</li>
<li>Wheat Beer</li>
<li>Mint Julip</li>
</ul>
现在,你打开CSS写出你的新样式类:
然后你你看着自己的工作,但是不幸的是,他并不起作用,你喜欢酒的文本没有变为红色或则加粗。一些可以的东西在起作用。在CSS样式中你会发现还有下面的这个语句:
你的麻烦在这,两个不动的Css选择器竟然同时定义了字体的颜色和字体的粗细。说明字体大小的语句只有一个。所以很明显起作用的只有一个选择器。两个选择器不是在战斗,但是浏览器不需要决定它们中间那一个语句是荣耀的。浏览器是根据具体规则的标准设置。我想这困惑这一些初学者,因为他们还没有完全理清这些东西。他们可能认为.favorite是“胜利”的哪一个:favorite语句是进一步的CSS样式,或者是因为在HTML中class=”favorite” 离实际文本近一些。
但是,事实上,在CSS中选择器的顺序扮演者一个重要的角色而且“进一步的”的那个语句事实上是“胜利的”当特定值是一样的精确。
.favorite
{
这里的重点在:对于你的每一个机会,你要尽可能的详细使它是有意义的。尽管用这个简单的例子可以代表上面的例子。 但是它更明显的显示 :简单的运用一个类名来指向 “favorite drink” ,是不能覆盖红色的字体属性。它也将不会是非常安全的即使它是起作用的。下面的用法可能是明智的:
ul #summer-drinks li .favorite这就是我叫的“你要尽可能的详细使它是有意义的”。你实际上可以使用更确切的方法使用这些属性,像这样:
刚才为什么我们第一次尝试改变字体的大小和颜色失败了呢? 随着我们的学习,它是因为标签自己简单的运用类名,拥有较低的特性值,被其他的指向这个无序列表的具有ID值的选择器“压倒”。在那个句子中,重要的字眼是class和 ID。CSS不关心用class 和IDs做什么,但是它却给他们赋予不同的特定权重。事实上,一个ID拥有比一个class大10倍的特定权重。让我们看看特定值是怎么计算的:
注意事项:
上面的例子以上的例子是非常接近的CSS是如何计算的特殊性价值,但是那是重要的例外。数字并不是真正的像在十进制中“加在一起”,而是基于一种无限方式的组合在一起,所以231实际上像2,3,1。重要的区别在(Jonathan Snookpoints out)假如任意一个数字超过了9,将不像十进制那样向前进一位。所以一个选择器的特定值可以是2,11,1.它不能被计算成311,谢谢下面的Eric Meyer 的《区别上跳跃》, 也谢谢 Eric关于这种区别的页面。
.favorite
Word教程网 | Excel教程网 | Dreamweaver教程网 | Fireworks教程网 | PPT教程网 | FLASH教程网 | PS教程网 |
HTML教程网 | DIV CSS教程网 | FLASH AS教程网 | ACCESS教程网 | SQL SERVER教程网 | C语言教程网 | JAVASCRIPT教程网 |
ASP教程网 | ASP.NET教程网 | CorelDraw教程网 |