资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

css样式的继承性、层叠性、优先级有什么作用

这篇文章主要讲解了“css样式的继承性、层叠性 、优先级有什么作用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“css样式的继承性、层叠性 、优先级有什么作用”吧!

磁县网站建设公司创新互联,磁县网站设计制作,有大型网站制作公司丰富经验。已为磁县近千家提供企业网站建设服务。企业网站搭建\外贸网站制作要多少钱,请找那个售后服务好的磁县做网站的公司定做!


一、css样式的继承性:

作用:给父元素设置一些属性,子元素也可以使用
应用场景:
一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容。优化代码,降低工作量
注意点:
1.并不是所有的属性都可以继承,、
只有color/font-/text-/ line开头的属性才能继承;
2.在css的继承中,不仅仅是儿子可以继承,只要是后代
都能继承
3.继承性中的特殊性
3.1 a标签的文字和颜色 和下划线是不能继承父元素的——举例:
复制代码

     < div>

         

我是大标题

          我是超链接

          

我是段落

      

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

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

单独写个css样式:h2{font-size:24px;}

应用场景:
一般用于设置网页上的一些共性信息,例如网页的文字颜色,
字体,文字大小灯内容
格式:
body{属性:值;}

二、层叠性
比如p标签,给p标签设置id和class类名,选择器上选择p 和p的id或者class类名,设置相同的属性,就是层叠性

三、优先级:(三一)
作用:当多个选择器(比如选择p标签和p标签里设置的id或者class昵称),选中同一个标签,并且给同一个标签设置相同的属性时,
如何层叠就优先级来确定。
2.优先级判断的三种方式
2.1 是否直接选中,直接选中指的是直接选中要设置css样式的标签,和标签的id或者class类名。(间接选中就是指的是继承性,比如选择

    那里面的li继承ul的属性,就称为继承属性)
    如果是间接选中,谁离目标标签比较近就听谁的。
    2.2是否是相同的选择器。
    如果是相同选择器,那么就是谁写在后面就听谁的。(比如给两个p标签设置css样式
    p{color:blue}
    p{color:red}
    那么就会以第二个p为标准,文字变成红色

    2.3不同的选择器
    如果都是直接选中,并且不是相同类型的选择器,那么就会按照
    选择器的优先级来层叠
    id>类>标签>通配符>继承>浏览器默认

    权重计算

    如果选择器里有直接选中和间接选中。哪怕是间接的选择器为id选择器,也会优先实行直接选中的效果。

    感谢各位的阅读,以上就是“css样式的继承性、层叠性 、优先级有什么作用”的内容了,经过本文的学习后,相信大家对css样式的继承性、层叠性 、优先级有什么作用这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


    网站标题:css样式的继承性、层叠性、优先级有什么作用
    当前路径:http://cdkjz.cn/article/josojg.html

多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220