css的三大特性

  • 1)层叠性
    1,给一个标签设置的样式发生冲突的时候即样式的覆盖
    2,浏览器的渲染机制是从上到下的,当有冲突的时候就采用最后的那个样式
     <style  type="text/css">
        .two{
             color: green;
        }
        .one{
             color: red;
             font-size: 30px;
        }
        .tree{
             color: yellow;
             font-size: 40px;
        }
    </style>
  </head>
  <body>
  <p class="one two tree">
      一段文字
  </p>

结果是:只会有.tree的样式

  • 2)继承性
    1,发生的前提是:标签之间属于一种嵌套关系
    2,文字颜色可以之间继承
    3,字体大小可以继承
    4,字体可以继承
    5,行高也可以实现继承
    与文字有关的属性都可以,实现继承
    特殊点:
    a标签超链接不能实现字体颜色的继承,字体大小可以继承
    h1不可以继承文字的大小,继承过来还会做一个计算
   <head>
    <meta charset="utf-8">
    <style type="text/css">
    div{
        color: red;
        font-size: 30px;
    }
    </style>
  </head>
  <body>
    <div>
        <a href="">a</a>
    </div>
  </body>
  • 3)优先级
    1,默认样式<标签选择器 <类选择器 <id选择器 <行内样式 <!important
    0 1 10 100 1000 1000以上
  <head>
    <meta charset="utf-8">
    <style type="text/css">
    .one{
        color: pink;
    }
    #div1{
        color: green;
    }
    p{
        color: red !important;
    }
    </style>
</head>
<body>
    <p id="div1" class="one" style="color:black">
        文字
    </p>    
</body>

2,继承的权重为0;

    <style type="text/css">
    #one{
        color: red;
    }
    .two{
        color: pink;
    }
      </style>
</head>
<body>
    <div id="one">
        <p class="two">
            fd
        </p>
    </div>
</body>

结果为:粉色

3,权重会叠加

  .two{                       10
          color: green;
      }      
   div.one p{                 12
          color: pink;
      }
   p.two{                     11
          color: yellow;
      }
   p{                          1
          color: red;
    }
</head>
<body>
      <div class="one">
           <p class="two">
              文字
           </p>
      </div>
</body>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、继承性( Inherited ):给父元素设置的属性,子孙元素也可以使用。应用场景:一般用于设置网页上的一些共...
    幸运密码_xymm16888阅读 549评论 0 0
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,247评论 0 40
  • CSS的继承性 什么是继承性 作用给父元素设置一些属性,子元素也可以使用。就是继承性 注意点 只有以color/f...
    Isaacyyy阅读 366评论 0 1
  • 1.继承属性 作用:给父元素设置一些属性,子元素也可以使用 使用范围: 1.color/font-/text-/l...
    5a4982b9b5fe阅读 196评论 0 0
  • FreeCodeCamp - HTML5 and CSS 发现原来在另外一台电脑学 FreeCodeCamp 的时...
    付林恒阅读 9,476评论 2 17