C1任务-29:CSS优先级
任务背景
当创建的CSS样式表越来越多、越来越复杂的时候,一个元素的样式可能受到多个CSS样式表的影响,到底这个元素显示的是哪个样式表的样式呢?通过CSS优先级可以帮助我们得出结论。
任务目标
理解CSS优先级
掌握CSS优先级的应用
任务训练
一、CSS优先级
1.浏览器通过CSS选择器的优先级来判断元素到底应该显示那个属性值
2.CSS的优先级如下
内联样式】>【ID选择器】>【类选择器、属性选择器、伪类选择器】>【标签选择器、伪元素选择器】
3.通配符选择器【*】和关系选择符【+(相邻选择符)、>(子代选择符)、~(兄弟选择符)、""(后代选择符)等】对优先级没有影响
4.在选择器使用较多的情况下,使用CSS优先级判断元素的属性值显示很容易出错且不利于排错,可以通过给选择器添加权重的概念来帮助我们更好的理解CSS选择器的优先级
5.选择器的权重可以相加
例:#header.navli{list-style:none;}
该选择器的权重=ID选择器100+类选择器10+标签选择器1=111
6.对于同一个元素的两种选择器均声明了同一个属性情况
权重相同时,根据HTML代码从上往下执行的特点,后面选择器会覆盖前面选择器中相同的属性
权重不同时,权重大的选择器生效
7.!important规则
当你在一个样式声明中使用【!important】规则时,这个样式将覆盖其他的任何声明
!important规则与优先级无线,但是会直接影响样式的最终显示结果
练习
现有如下代码片段,helloworld的最终显示颜色为color:________
根据上表1中的CSS权重计算
第一个选择器权重=100+10+1=111
第二个选择器权重=100+0+1+1=102
第一个选择器权重更大,第一个选择器生效,p元素内容的字体颜色显示为#111999
2.现有如下代码片段,helloworld的最终显示颜色为color:_______
CSS选择器优先级中有一个特殊的规则:【!important】
当你在一个样式声明中使用【!important】规则时,这个样式将覆盖其他的任何声明,与优先级无关
答:#999998