• css样式的继承性、层叠性 、优先级


    一、css样式的继承性:

    作用:给父元素设置一些属性,子元素也可以使用
    应用场景:
    一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容。优化代码,降低工作量
    注意点:
    1.并不是所有的属性都可以继承,、
    只有color/font-/text-/ line开头的属性才能继承;
    2.在css的继承中,不仅仅是儿子可以继承,只要是后代
    都能继承
    3.继承性中的特殊性
    3.1 a标签的文字和颜色 和下划线是不能继承父元素的——举例:
    <style type="text/css">
    div{
        color:red
       font-size:24px;
        text-decoration: none;
          }
      </style>
     <body>
             < div>
                  <h1>我是大标题</h1>
                  <a  heref="#">我是超链接</a>
                   <p>我是段落</p>
               </div>
     (上面的代码,只有p继承了div设置的属性,而a标签是不能继承父元素的属性,颜色不会变红,下划线也不会被去掉)

    3.2 h标签的文字大小也是不能继承父元素的(见上面代码,<h1>标签中我是大标题不会继承<div>的   font-size:24px;属性,所以需要给<h1>单独写个css样式:h1{font-size:24px;}

    应用场景:
    一般用于设置网页上的一些共性信息,例如网页的文字颜色,
    字体,文字大小灯内容
    格式:
    body{属性:值;}
     
    二、层叠性
    比如p标签,给p标签设置id和class类名,选择器上选择p 和p的id或者class类名,设置相同的属性,就是层叠性
     
    三、优先级:(三一)
    作用:当多个选择器(比如选择p标签和p标签里设置的id或者class昵称),选中同一个标签,并且给同一个标签设置相同的属性时,
    如何层叠就优先级来确定。
    2.优先级判断的三种方式
    2.1 是否直接选中,直接选中指的是直接选中要设置css样式的标签,和标签的id或者class类名。(间接选中就是指的是继承性,比如选择<ul>那里面的li继承ul的属性,就称为继承属性)
    如果是间接选中,谁离目标标签比较近就听谁的。
    2.2是否是相同的选择器。
    如果是相同选择器,那么就是谁写在后面就听谁的。(比如给两个p标签设置css样式
    p{color:blue}
    p{color:red}
    那么就会以第二个p为标准,文字变成红色
     
    2.3不同的选择器
    如果都是直接选中,并且不是相同类型的选择器,那么就会按照
    选择器的优先级来层叠
    id>类>标签>通配符>继承>浏览器默认
     
     
    权重计算
     
    如果选择器里有直接选中和间接选中。哪怕是间接的选择器为id选择器,也会优先实行直接选中的效果
  • 相关阅读:
    python的字符串连接操作符+
    python-在定义函数时,不定长参数中,默认值参数不能放在必选参数前面
    python中的sort方法使用详解
    详解Python中的join()函数的用法
    python中map()函数
    python的匿名函数lambda解释及用法
    python 代码的缩进位置决定执行部分
    python代码位置引发的错误
    python中如何使输出不换行
    git stash
  • 原文地址:https://www.cnblogs.com/aoyama/p/10564965.html
Copyright © 2020-2023  润新知