CSS教程:详解CSS特定值
以前我从来没有具体的谈到这个问题 最好的解释方法是用一个例子来说明那的特性引起了你的困惑或则没有按照预期的显示。然后我们将近距离的细看计算实际的值来选择最优的选择器。 这是一个简单的例子 无序的列表: <ul id="summer-drinks"> 现在你想指定他们中间你最喜欢的酒并且把它的样式做一点变化,你需要通过这个列表元素上的一个类名来实现它。e <ul id="summer-drinks"> 现在,你打开CSS写出你的新样式类: .favorite{ color: red; font-weight: bold; } 然后你你看着自己的工作,但是不幸的是,他并不起作用,你喜欢酒的文本没有变为红色或则加粗。一些可以的东西在起作用。在CSS样式中你会发现还有下面的这个语句: 你的麻烦在这,两个不动的Css选择器竟然同时定义了字体的颜色和字体的粗细。说明字体大小的语句只有一个。所以很明显起作用的只有一个选择器。两个选择器不是在战斗,但是浏览器不需要决定它们中间那一个语句是荣耀的。浏览器是根据具体规则的标准设置。我想这困惑这一些初学者,因为他们还没有完全理清这些东西。他们可能认为.favorite是“胜利”的哪一个:favorite语句是进一步的CSS样式,或者是因为在HTML中class=”favorite” 离实际文本近一些。 但是,事实上,在CSS中选择器的顺序扮演者一个重要的角色而且“进一步的”的那个语句事实上是“胜利的”当特定值是一样的精确。 .favorite { color: red; }.favorite { color: black; } 字体的颜色将是黑色的。。。。但是我却不敢不苟同。 这里的重点在:对于你的每一个机会,你要尽可能的详细使它是有意义的。尽管用这个简单的例子可以代表上面的例子。 但是它更明显的显示 :简单的运用一个类名来指向 “favorite drink” ,是不能覆盖红色的字体属性。它也将不会是非常安全的即使它是起作用的。下面的用法可能是明智的: ul #summer-drinks li .favorite { color: red; font-weight: bold; }这就是我叫的“你要尽可能的详细使它是有意义的”。你实际上可以使用更确切的方法使用这些属性,像这样: 但是它是从顶部开始的,它使你的CSS样式不具有易读性并且产生真正的好处。 计算CSS特定的值刚才为什么我们第一次尝试改变字体的大小和颜色失败了呢? 随着我们的学习,它是因为标签自己简单的运用类名,拥有较低的特性值,被其他的指向这个无序列表的具有ID值的选择器“压倒”。在那个句子中,重要的字眼是class和 ID。CSS不关心用class 和IDs做什么,但是它却给他们赋予不同的特定权重。事实上,一个ID拥有比一个class大10倍的特定权重。让我们看看特定值是怎么计算的:
换句话说:
|
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢! |