css样式优先级法则的示例分析

　　介绍

这篇文章给大家分享的是有关css样式优先级法则的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

css样式优先级介绍:

当外部样式,内部样式和内联样式同时应用于同一个元素时,优先级如下:

(外部样式)外部样式表& lt;(内部样式)内部样式表& lt;(内联样式)内联样式

有个例外的情况,就是如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式。

示例如下:

& lt; head>,,,, 　　,,,& lt; style 类型=拔谋?css"在,,,, 　　,,,,,/*,内部样式,*/,,,, 　　,,,,,h4{颜色:绿色;},,,, 　　,,,& lt;/style>,,,, 　　,,,& lt; !——,外部样式,style.css ,在,,,, 　　,,,& lt; link  rel=皊tylesheet",类型=拔谋?css" https://www.yisu.com/zixun/, href=" style.css "/> 　　 　　

测试! 　　

选择器的优先权

css样式优先级法则的示例分析

解释:

1。,内联样式表的权值最高1000;

2。,ID选择器的权值为100

3。类,类选择器的权值为10

4。,HTML标签选择器的权值为1

利用选择器的权值进行计算比较,示例如下:

& lt; html>,,,, 　　& lt;才能head>,,,, 　　,,,& lt; style 类型=拔谋?css"在,,,, 　　,,,,,,,# redP  p  {,,, 　　,,,,,,,,,,,,/*,权值,=,100 + 1=101,*/,,,, 　　,,,,,,,,,,,,颜色:# F00;,,/*,红色,*/,,,, 　　,,,,,,,},,,, 　　,,,,,,,# redP  .red  em  {,,, 　　,,,,,,,,,,,,/*,权值,=,100 + 10 + 1=111,*/,,,, 　　,,,,,,,,,,,,颜色:# 00 f;,/*,蓝色,*/,,,, 　　,,,,,,,},,,, 　　,,,,,,,# redP  p  span  em  {,,, 　　,,,,,,,,,,,,/*,权值,=,100 + 1 + 1 + 1=103,*/,,,, 　　,,,,,,,,,,,,颜色:# FF0;/*黄色*/,,,, 　　,,,,,,,},,,, 　　,,,& lt;/style>,,,, 　　& lt;才能/head>,,,, 　　& lt;才能body>,,,, 　　,,,,& lt; div  id=皉edP"在,,,, 　　,,,,,,,& lt; p 类=皉ed"祝辞red ,,, 　　,,,,,,,,,,& lt; span> & lt; em> em  red & lt;/span>,,,, 　　,,,,,,,& lt;/p>,,,, 　　,,,,,,,& lt; p> red

,,,, 　　,,,,& lt;/div>,,,, 　　& lt;才能/body>,,,, 　　& lt;/html>

结果:& lt; em>标签内的数据显示为蓝色。

CSS优先级法则:

,选择器都有一个权值,权值越大越优先;

B,当权值相等时,后出现的样式表设置要优于先出现的样式表设置;

C,创作者的规则高于浏览者:即网页编写者设置的CSS样式的优先权高于浏览器所设置的样式;

D,继承的CSS样式不如后来指定的CSS样式;

E,在同一组属性设置中标有”!重要的“规则的优先级最大;示例如下:

(学习视频分享:css视频教程)

& lt; html>,,,, 　　& lt;才能head>,,,, 　　,,,& lt; style 类型=拔谋?css"在,,,, 　　,,,,# redP  p {,,, 　　,,,,,,,/*两个颜色属性在同一组*/,,,, 　　,,,,,,,颜色:# 00 f  !重要,,/*,优先级最大,*/,,,, 　　,,,,,,,颜色:# f00;,,,, 　　,,,,},,,, 　　,,,& lt;/style>,,,, 　　& lt;才能/head>,,,, 　　& lt;才能body>,,,, 　　,,,,& lt; div  id=皉edP"在,,,, 　　,,,,,,& lt; p> color

,,,, 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

css样式优先级法则的示例分析