繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS教程:详解CSS特定值
- CSS样式表
- css 块状元素和内联元素
- CSS 盒模型、块状元素与内联元素、CSS选择器
- css 浮动 理解Float的含义
- CSS 清除浮动Clear
- CSS 制作网页导航条(上)
- CSS 制作网页导航条(下)
- css 浮动(float)页面布局
- css 浮动(float)页面布局(下)
- css position 定位
- css 定位应用实例
- CSS Hack 有关浏览器兼容方面
- css 单图片按钮实例(css 图片变换)
- 使用X-UA-Compatible来设置IE浏览器兼容模式
- div overflow 超出隐藏属性使用说明
- CSS 使用规则总结
- div+CSS 兼容小摘
- CSS的inherit与auto使用分析
- 如何组织和注释CSS文件
- CSS样式按整洁易懂的结构组织
- CSS Prism 查看和编辑CSS中用到的颜色
CSS样式表 中的 CSS教程:详解CSS特定值
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-30 浏览: 61 ::
收藏到网摘: n/a
以前我从来没有具体的谈到这个问题
最好的解释方法是用一个例子来说明那的特性引起了你的困惑或则没有按照预期的显示。然后我们将近距离的细看计算实际的值来选择最优的选择器。
这是一个简单的例子 无序的列表：
＜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写出你的新样式类：
.favorite{
color: red;
font-weight: bold;
}
然后你你看着自己的工作，但是不幸的是，他并不起作用，你喜欢酒的文本没有变为红色或则加粗。一些可以的东西在起作用。在CSS样式中你会发现还有下面的这个语句：
你的麻烦在这，两个不动的Css选择器竟然同时定义了字体的颜色和字体的粗细。说明字体大小的语句只有一个。所以很明显起作用的只有一个选择器。两个选择器不是在战斗，但是浏览器不需要决定它们中间那一个语句是荣耀的。浏览器是根据具体规则的标准设置。我想这困惑这一些初学者，因为他们还没有完全理清这些东西。他们可能认为.favorite是“胜利”的哪一个：favorite语句是进一步的CSS样式，或者是因为在HTML中class=”favorite” 离实际文本近一些。
但是，事实上，在CSS中选择器的顺序扮演者一个重要的角色而且“进一步的”的那个语句事实上是“胜利的”当特定值是一样的精确。
.favorite
{
字体的颜色将是黑色的。。。。但是我却不敢不苟同。
这里的重点在：对于你的每一个机会，你要尽可能的详细使它是有意义的。尽管用这个简单的例子可以代表上面的例子。 但是它更明显的显示 ：简单的运用一个类名来指向 “favorite drink” ，是不能覆盖红色的字体属性。它也将不会是非常安全的即使它是起作用的。下面的用法可能是明智的：
ul #summer-drinks li .favorite这就是我叫的“你要尽可能的详细使它是有意义的”。你实际上可以使用更确切的方法使用这些属性，像这样：
但是它是从顶部开始的，它使你的CSS样式不具有易读性并且产生真正的好处。
计算CSS特定的值
刚才为什么我们第一次尝试改变字体的大小和颜色失败了呢？ 随着我们的学习，它是因为标签自己简单的运用类名，拥有较低的特性值，被其他的指向这个无序列表的具有ＩＤ值的选择器“压倒”。在那个句子中，重要的字眼是class和 ID。ＣＳＳ不关心用class 和IDs做什么，但是它却给他们赋予不同的特定权重。事实上，一个ＩＤ拥有比一个class大10倍的特定权重。让我们看看特定值是怎么计算的：
- 假如元素有内联样式，那它将自动的拥有100点
- 每一个ID值100点
- 每一个类名（或者伪类，属性选择器），10点
- 每一个元素1点
简单的计算例子
注意事项：
上面的例子以上的例子是非常接近的CSS是如何计算的特殊性价值，但是那是重要的例外。数字并不是真正的像在十进制中“加在一起”，而是基于一种无限方式的组合在一起，所以231实际上像2，3，1。重要的区别在（Jonathan Snookpoints out）假如任意一个数字超过了9，将不像十进制那样向前进一位。所以一个选择器的特定值可以是2，11，1.它不能被计算成311，谢谢下面的Eric Meyer 的《区别上跳跃》， 也谢谢 Eric关于这种区别的页面。
资源：
- Smashing Magazine has a pretty comprehensive article on CSS Specificity
- W3 specs
- IE Quirks (try viewing this page in Fx and then IE)
- Fuzzy Specificity Hack: IE (even beta 8!) and older Opera browsers have a bug honoring the correct selector under specific circumstances.
评论 (0) All
