CSS教程:学习CSS的继承性
作者 佚名技术
来源 CSS技术
浏览
发布时间 2012-03-05
| t;h1 class="apple">这儿的苹果好红啊</h1>
应用举例效果：因为选择符h1和.apple都匹配上面的H1元素，那么到底浏览器会应用哪一个呢？通过在浏览器中观察，我们发现这段文字应用了.apple这个样式，所以它显示的是红色。这是因为两条规则的特殊性不一样，CSS规则必须这样进行处理。 样式表中的特殊性描述了不同规则的相对权重，它的基本规则是： 统计选择符中的id属性个数。 统计选择符中的class属性个数。 统计选择符中的html标记名格式。 最后，按正确的顺序写出三个数字，不要加空格或逗号，得到一个三位数。( 注意，你需要将数字转换成一个以三个数字结尾的更大的数)。相应于选择符的最终数字列表可以很容易确定较高数字特性凌驾于较低数字的。 以下是一个按特性分类的选择符的列表： h1 {color:blue;}特性值为：1 p em {color:purple;}特性值为：2 .apple {red;} 特性值为：10 p.bright {color:yellow;} 特性值为：11 p.bright em.dark {color:brown;} 特性值为：22 #id316 {color:yellow} 特性值为：100 从上表我们可以看出#id316具有更高的特殊性，因而它有更高的权重。当有多个规则都能应用于同一个元素时，权重越高的样式将被优先采用。 五、CSS继承的优先级问题 上面我们讨论了CSS的继承性和特殊性，在特殊性的框架下，被继承的特性值为0，这就意味着任何显示声明的规则将会覆盖其继承样式。因此，不管一条规则具有多高的权重，如果没有其他规则能应用于这个继承元素，那么它也只是个被继承的规则而已，举例说明。 样式定义： body { background:black;} li { color:gray;} ul.white { color:white} 应用举例代码： <ul> <li>举例列表一</li> <li>举例列表二</li> <li>举例列表三</li> <li>举例列表四</li> </ul> 有些读者可能认为除包含.white类的列表项显示为白色外，其余所有的列表项都应该是灰色的。然而情况并非如此。 为什么会出现这样的情况呢？因为带选择符LI的显式声明的权值比从UL.white规则那里继承过来的权值要大，所以每个列表项都是灰色的。 可能有些地方不是很好理解，大家多思考一下就会明白，平时在应用样式表的时候多留意思考一下。 下面我们再来看一个例子，若给定如下所示的标记，则EM强调文字将会是灰色的，而非黑色，因为EM规则的权值要大于从H1元素继承来的权值： 样式定义： h1#id316 { color:black;} 特性值为：101 em { color:gr |
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
关于CSS教程:学习CSS的继承性的所有评论
