CSS样式层叠规则

来源：互联网发布：linux没有网卡配置文件编辑：程序博客网时间：2024/05/01 20:38

今天阅读《CSS设计指南》，里面提及的查理版简单层叠要点，发现与自身的验证结果不一致，便试着将我得出的结论记录下来，同时将相关知识总结一下。这只是一个新手的一点思考，如有谬误，还请大家指正。另外，本人觉得《CSS设计指南》是一本很好的书籍，此文更多只是想记录自己一点独特的思考，对此书并无意见。

我对CSS样式层叠规则的总结

0、若本身设置了样式，则继承的样式无效；我认为也可以简单理解为继承的特指度为0；
1、！important具有最高权限，只要声明中加上这一句，其他样式都会被层叠；我认为可以简单理解为其特指度为无穷大；
2、行内式仅次于！important；（这一点与书中所说不一致）
3、除上面三者外，其余样式按照(I-C-E)计算特指度（下文将简单介绍）。特指度高的层叠特指度低的；
4、同特指度的，后面的层叠前面的样式。（这一点与书中所说的细节也有点不同）

我的结论与《CSS设计指南》查理版简单层叠要点有哪些差异

1、书中查理版简单层叠要点指出特指度更高的样式层叠其他样式，包括行内式，真的是这样吗？我验证的结果显示并非如此。
以下两块代码，按照书中所说，段落应该是蓝色，但是结果却是红色。事实上我试了各种写法，均无法层叠行内式（除了！important;）这证明行内式会将特指度更高的样式层叠，或者说行内式的特指度是仅次于！important。
这里写图片描述

<style>        #box1 #box2 #box3 #box4 p.p1 {            color:blue;        }    </style>

<div id="box1">        <div id="box2">            <div id="box3">                <div id="box4">                    <p class="p1" style="color:red">你好我好大家好</p>                </div>            </div>        </div>    </div>

2、《CSS设计指南》的查理版简单层叠要点指出行内样式胜过包嵌入样式，嵌入样式胜过链接样式。但我发现这个并不一定。我先写嵌入式，再写外链式，链接样式将嵌入式给层叠了。不过这种写法大概不规范吧。但这说明了同特指度的层叠实际上是按照浏览器读取的顺序，后读取的层叠早读取的，而并非一定是嵌入样式胜过链接样式。
这里写图片描述

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>        p.p1 {color:blue;}    </style>    <link rel="stylesheet" href="demo.css"></head><body>    <div id="box4">        <p class="p1">你好我好大家好</p>    </div></body></html>

外链：

p.p1 { color:purple; }

(I-C-E)计算特指度

即ID权重为100，class权重为10，element标签权重为1，特指度就是将样式中选择器里用到的id、class、element按权重相加得出的值。
如：p.p1的特指度是1+10=11。
另外：实际上三者权重为1/10/100估计只是一个方便估算的约值，而非准确值。
例如：12个element+1个class，按照上面的方法计算特指度是22，
而两个class的特指度是20，但实际上后者的特指度高于前者。
这种极端情况并不常见，在大多数情况下(I-C-E)计算特指度仍然适用。

我对CSS样式层叠的一点补充

上面总结了我个人认为的层叠规则，关于若本身设置了样式，则继承的样式无效，我觉得可以这样理解：
这是很自然的呀，长辈给你介绍了一个女孩，而你已经有女朋友了，那肯定是选自己女朋友做老婆更自然一点吧。
终于写完了人生第一个博客，试了一下markdown，希望是一个好的开始吧。

阅读全文

0 0