当前位置: 首页 > Web前端 > HTML5

好程序员HTML5培训教程-css样式的继承性、层叠性 、优先级

时间:2023-04-05 19:07:26 HTML5

div{color:redfont-size:24px;text-decoration:none;}程序员好HTML5培训教程-Css样式继承、层叠、优先级父元素设置一些属性,子元素也可以使用应用场景:一般用来设置网页上的一些常用信息,比如文字颜色、网页的字体、文字大小等。优化代码,减少工作量。注意事项:1、不是所有的属性都可以继承,只有color/font-/text-/line开头的属性可以继承;2、css的继承中,不仅儿子可以继承Inheritance,只要是后代的都可以继承3、继承的特殊性3.1a标签的文字、颜色、下划线不能继承父元素——例如:copy代码div{color:redfont-size:24px;text-decoration:none;}

我是标题

我是超链接

我是段落

(以上代码,只有p继承div设置的属性,a标签不能继承父元素的属性,颜色不会变红,下划线也不会去掉)复制代码3.2文字大小h标签的不能继承父元素(见上面代码,在

标签中,我是大标题,不会继承
的font-size:24px;属性,所以需要给

单独写一个css样式:h1{font-size:24px;}应用场景:一般用来设置网页上的一些常用信息,比如网页的文字颜色、字体、文字大小、灯光内容格式:body{attribute:value;}二、级联比如p标签,给p标签设置id和类名,选择器上选择p和p的id或类名,设置相同的属性,这就是级联。)作用:当多个选择器(比如选择p标签和p标签中设置的id或classnickname)选择同一个标签,为同一个标签设置相同的属性时,如何级联由优先级决定。2.优先级判断的三种方法2.1是否直接选择,直接选择是指直接选择要设置CSS样式的标签,以及标签的id或class名。(间接选择是指继承,比如
    中的li继承了ul的属性,就称为继承属性。)如果是间接选择,谁离目标标签近,谁就听。2.2是相同的选择器。如果是同一个选择器,那么后面谁写谁就听谁的。(比如你给两个p标签设置了css样式p{color:blue}p{color:red},那么就会以第二个p为标准,文字会变成红色。2.3如果都不同选择器是直接选择的,而不是同类型的选择器,会按照选择器的优先级进行级联,id>class>label>wildcard>inheritance>browserdefaultweightcalculation如果有直接选择和间接选择在选择器。即使间接选择器是id选择器,也会优先选择直接选择的效果。感谢大家关注程序员的前端教程分享!