资源描述：
《css优先级问题详解》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。
1、css优先级问题详解当你将一个样式添加到元素上却发现不起作用时，那就是遇到优先级问题了。那么应该如何处理css优先级问题呢，下面我总结了一些解决css优先级问题的常用法则。样式距离我们可以通过使用外部样式、内部样式、内联样式等方法给元素添加指定的样式，此时的优先级是：外部样式it;内部样式it;内联样式这个应该比较容易理解，也就是说离元素距离越近的样式优先级越大。如：代码如下：It;styletype=〃text/css〃gt;div{color:blue;}//内部样式It:/stylegt;It;linkrel=〃stylesheet〃type=
2、〃text/css〃href="mystyle.ess’’/gt;//夕卜部样式(color:green)It;divstyle=’’color:red"gt;mycolorlt;/divgt;//内联样式此时显示的优先级是redgt;bluegt;green。戶斤以mycolor显示为红色。特殊的计算方法假设有下面这段代码：代码如下：It:styletype=〃text/css〃gt;divp.classSelector{color:blue}#idselectorp{color:red}lt;/stylegt;It;divid="idSelect
3、orz/gt:It;pclass=〃classSelector〃gt;mycolorlt;/pgt;It;/divgt;我们面对下面的css，如何判断优先级呢？代码如下：It:styletype=〃text/css〃gt;divp.classSelector{color:blue}ttidselectorp{color:red}It;/stylegt;这里介绍一种特殊的计算方法元素，伪元素：1-(0,0,0,1)类，伪类，属性：1-(0,0，1，0)ID:1-(0,1,0,0)内联样式：1-(1,0,0,0)这里的属性指的是：效果如下：优先级从上往下
4、依次增加，至于如何计算，同样举例说明：p:1个元素-(0,0,0,1)div:1个元素_(0,0,0,1)#idSelector:1个ID-(0,1,0,0)div#idSelector:1个元素，1个ID-(0,1，0,1)div#idSelectorp:2个元素，1个ID-(0,1，0,2)div#idSelectorp.classSelector:2个元素，1个类，1个ID-(0,1，1,2)所以现在我们再来看上面的例子：代码如下：divp.classSelector{color:blue}-(0,0,0,1)+(0,0,0,1)+(0,0,1
5、，0)=(0,0,1,2)ttidselectorp{color:red}-(0,1,0,0)+(0,0,0，1)=(0,1,0,1)由于优先级上(0,l,0,l)gt；(0,0,1,2),所以我们知道最后显示的颜色为红色。继承继承是个比较好理解的概念，即子元素会继承父元素的样式。例如：代码如下：It;divstyle=〃color:recTgt;It;pgt;mycolorlt;/pgt;lt;/divgt;上例中的span会继承父元素div的样式。但不是所有的属性都会默认使用继承的方式，比如margin和padding属性。例如：代码如下：It;
6、divstyle=〃margin:1Opx;padding:10px"gt;It;pgt;mycolorlt;/pgt:It;/divgt;此时，元素p并不会继承父元素div的margin和padding样式，除非你这么做：代码如下：It;divstyle=〃margin:10px;padding:10px〃gt;It;pstyle="margin:inherit;padding:inherit〃gt;mycolorlt;/pgt:1t;/divgt;总结1.首先找到所有作用在元素上的样式。（不要忽略来自继承的样式）2.计算样式的作用距离，距离越近，
7、优先级越大。3.使用特殊的计算方法来判断同距离内的样式。1.如果计算后的结果相同，那么后声明的样式覆盖先前声明的样式。2.如果某个样式中设置！important,则无论它的优先级如何，都以该样式为准。（除非迫不得已，强烈不建议使用这个方法，因为这无疑是不符合css思想的用法）样式表允许以多种方式规定样式信息。样式可以规定在单个的HTML元素中，在HTML页的头元素中，或在一个外部的CSS文件中。甚至可以在同一个HTML文档内部引用多个外部样式表。当同一个HTML元素被不止一个样式定义时，会使用哪个样式呢？一般而言，所有的样式会根据下面的规则层叠于一个
8、新的虚拟样式表中，其中数字4拥有最高的优先权。#8226;浏览器缺省设置#8226;外部样式表#8226;内
