css优先级 20
css的优先级是怎么回事css优先级是怎么样使用的，给我举个例子我知道那些优先级数字怎么算，我不知道那些数字怎么用...
css的优先级是怎么回事
css优先级是怎么样使用的，给我举个例子
我知道那些优先级数字怎么算，我不知道那些数字怎么用 展开
css优先级是怎么样使用的，给我举个例子
我知道那些优先级数字怎么算，我不知道那些数字怎么用 展开
5个回答
展开全部
所谓CSS优先级，即是指CSS样式在浏览器中被解析的先后顺序。既然样式有优先级，那么就会有一个规则来约定这个优先级，而这个“规则”就是重点。
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
•浏览器缺省设置
•外部样式表
•内部样式表（位于 <head> 标签内部）
•内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。这只是一个大方面的优先级，在前面文章中我们讲过CSS有很多选择器，那么对于同种样式的CSS，各个选择器的优先级又是如何呢？
我们将某一个CSS看成一个三位数，通过比较数字的大小来获取优先级的高低，那么就会相当简单。在这里可以通过下面的规则来定义各个选择器对应的数字。
•百位数是该选择器上的id的数量的总和；
•十位数是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；
•个位数是计算元素(就像table、p、div、*等等)和伪元素(就像:first-line等)；
•如果两个选择器对应的数字相等，也就是具有同样的优先级，在样式表中后面的那个起作用。
•标有"!important"的规则具有最高优先级，例如H1{color:black !importan; font-family:sans-serif}，前景色被标为important，这个前景色具有很高的优先级。但是这种声明容易引起混乱，因此通常使用得较少。
选择器 数值
h1 {color:blue;} 1
p em {color:purple;} 1 + 1 = 2
.apple {color:red;} 10
p.bright {color:yellow;} 1 + 10 = 11
p.bright em.dark {color:brown;} 1 + 10 + 1 + 10 = 22
#id316 {color:yellow} 100
一般我们还可以通过浏览器的插件来查看，到底哪个CSS起作用，比如Firebug(Firefox)、Developer Tools(IE8)等。上面我们介绍到当优先级相同时，哪个CSS起作用取决于所处的位置，通常后面的CSS优先级要高。但是对于IE浏览器，具有相同数值的动态CSS取决于添加的顺序前后，而不是添加的位置前后；后添加的优先级要高。
样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
•浏览器缺省设置
•外部样式表
•内部样式表（位于 <head> 标签内部）
•内联样式（在 HTML 元素内部）
因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。这只是一个大方面的优先级，在前面文章中我们讲过CSS有很多选择器，那么对于同种样式的CSS，各个选择器的优先级又是如何呢？
我们将某一个CSS看成一个三位数，通过比较数字的大小来获取优先级的高低，那么就会相当简单。在这里可以通过下面的规则来定义各个选择器对应的数字。
•百位数是该选择器上的id的数量的总和；
•十位数是用在该选择器上的其它属性选择器和伪类的总和。这里包括class (.example) 和属性选择器(比如 li[id=red])；
•个位数是计算元素(就像table、p、div、*等等)和伪元素(就像:first-line等)；
•如果两个选择器对应的数字相等，也就是具有同样的优先级，在样式表中后面的那个起作用。
•标有"!important"的规则具有最高优先级，例如H1{color:black !importan; font-family:sans-serif}，前景色被标为important，这个前景色具有很高的优先级。但是这种声明容易引起混乱，因此通常使用得较少。
选择器 数值
h1 {color:blue;} 1
p em {color:purple;} 1 + 1 = 2
.apple {color:red;} 10
p.bright {color:yellow;} 1 + 10 = 11
p.bright em.dark {color:brown;} 1 + 10 + 1 + 10 = 22
#id316 {color:yellow} 100
一般我们还可以通过浏览器的插件来查看，到底哪个CSS起作用，比如Firebug(Firefox)、Developer Tools(IE8)等。上面我们介绍到当优先级相同时，哪个CSS起作用取决于所处的位置，通常后面的CSS优先级要高。但是对于IE浏览器，具有相同数值的动态CSS取决于添加的顺序前后，而不是添加的位置前后；后添加的优先级要高。
追问
我就是不知道那些1122怎么用
追答
原则一 - 继承不如指定。
原则二 - #ID > .class > 标签选择符。
原则三 - 越具体越强大。
原则四 - 标签#id >#id ; 标签.class > .class。
原则五 - 原则一 > 原则二 > 原则三 > 原则四。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
.a{color:red;}
#b{color:blue;}
<span class='a' id='b'>1111111</span>
两个样式都给了，而且是 两个不同的 COLOR，这时 要取哪个颜色呢？
在这里就出现了 优先级 ， ID 为优先 也就是说 颜色会变成 BLUE 而不是 RED
#b{color:blue;}
<span class='a' id='b'>1111111</span>
两个样式都给了，而且是 两个不同的 COLOR，这时 要取哪个颜色呢？
在这里就出现了 优先级 ， ID 为优先 也就是说 颜色会变成 BLUE 而不是 RED
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
也就是css的继承，比如改写写代码：
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
css样式就近原则
例如在<head></head>之间设置样式
.aa{color:red;}
<div class="aa">aaaa</div>//这样aa中的字体就是红色
<div class="aa" style="color:green">aaaa</div>//这样aa中的字体就是绿色
就近原则 一个元素设定了几个样式 离这个元素最近的样式起作用
例如在<head></head>之间设置样式
.aa{color:red;}
<div class="aa">aaaa</div>//这样aa中的字体就是红色
<div class="aa" style="color:green">aaaa</div>//这样aa中的字体就是绿色
就近原则 一个元素设定了几个样式 离这个元素最近的样式起作用
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
一般常用的分为3种：
1.内联最优先,比如<div id="a" style="border:1px solid;" width="100px"></div>这里边的style就是样式
2.内部样式次之。比如<body><style>#a{border:1px solid;}</style><div id="a"></div></body>。style写在<head>中也可以
3.外部样式了，在html中写内容，然后在css中写样式，写法跟第二种一样，不需要加<style>,定义id的用#名称，class的用.名称。
1.内联最优先,比如<div id="a" style="border:1px solid;" width="100px"></div>这里边的style就是样式
2.内部样式次之。比如<body><style>#a{border:1px solid;}</style><div id="a"></div></body>。style写在<head>中也可以
3.外部样式了，在html中写内容，然后在css中写样式，写法跟第二种一样，不需要加<style>,定义id的用#名称，class的用.名称。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
