css样式应用优先级实用.pptx

重要声明（!important）divcolor:blue!important;color:green;虽然按照顺序应该是使用后声明的绿色，但 是因为!important的缘故，所以最后使用的却是蓝色。第1页/共15页正常声明 1.内联样式在html文档的元素中直接插入样式的如：在ie6中此优先级与id选择器同级 第2页/共15页2.id选择器 应用于对应id的元素，css中用“#”后跟id来标记。如：#header display:none;第3页/共15页3.类（属性，伪类）选择器 a)a)类选择器 应用于对应class的元素，css中用“.”后跟class名来标记。如：headerdisplay:none;第4页/共15页b）属性选择器属性选择器应用于对应class的元素，css中用“”标记中html元素属性名来标记。如：divtitle display:none;第5页/共15页c)伪类选择器LVHA伪类,样式按LVHA优先级顺序从右至左覆盖。所以要注意一下这4个伪类的声明顺序，不同的顺序会产生不同的效果。a:link-默认链接样式a:visited-已访问链接样式a:hover-鼠标悬停样式a:active-鼠标点击样式第6页/共15页4.元素（伪元素）选择器a)元素选择器应用于所有对应的html标签，css中直接使用html元素标记 如：divdisplay:none;第7页/共15页b)伪元素选择器:first-letter-首字母样式:first-line-首行样式第8页/共15页5.通配符选择器 应用于所有匹配的样式，类似模糊匹配，*号就是什么都可以啦。如：div*display:none;第9页/共15页6.继承样式和结合符 a)a)继承样式 p会继承div设置的样式，但没有权重，任何方式给p定义的样式都可以轻易覆盖继承样式 如：divcolor:red;第10页/共15页b)结合符（combinator）1.后代选择器（descendant selector/上下文选择器contextual selector）后代结合符（descendant combinator）：空格空格前后的元素是后代关系。树结构的分支选择器。（可一直嵌套下去，如：div p span）如：div span display:none;第11页/共15页 2.子（元素）选择器（child selector）子结合符：大于号（child combinator）大于前后的元素必须是父子关系。如：div span display:none;第12页/共15页 3.相邻兄弟选择器（adjacentsibling selector）相邻兄弟结合符（adjacentsibling combinator）：加号加号前后的元素必须是同级兄弟关系。如：li+li display:none;第13页/共15页事实上一般不会遇到太过复杂的情况，按照我们常用的简单地来记就是：!important内联定义idclass元素复合结构（无定义复合父子复合兄弟复合）第14页/共15页感谢您的欣赏！第15页/共15页