zoukankan      html  css  js  c++  java
  • CSS核心原理

    1.优先原则:

    后解析的内容,会覆盖掉之前解析的内容;

      同一个选择器:文件执行从上往下,后面的样式会覆盖前面的;

      如下例中color最终为粉色;

    div {
    color:red;
    color:pink;
    }
    

     同一类型的选择器:从上往下,如下例中color最终为绿色;

    div {
    color:red;
    }
    div {
    color:green;
    }
    

       背景颜色最终为绿色,(解析顺序与css文件中的排列有关,从上到下)

    <div class="txt2 txt1"></div>  
    .txt1 {
    background:red;
    }
    .txt2 {
    background:green;
    }  

      不同类型的选择器:先解析低优先级的选择器,后解析高优先级的选择器;(*<标签<class<id)

     因此有冲突时,最终生效的会的高优先级的选择器定义的样式;

      外部样式 与 内部样式 :合并之后一起解析 先外部样式 后内部样式 再从上往下执行

       因此有冲突时,最终应用的是内部样式

      内联样式 : 只有外部样式与内部样式解析完成后,才解析内联样式

       因此有冲突时,最终应用的是内联样式。

      加了 !important 字段:最后解析

       因此有冲突时,最终应用的是加了 !important 字段的样式。 

    2.继承原则:

    嵌套里面的标签会拥有外部标签的某些样式,即子元素会继承父元素的某些样式

       1)与文字 文本 样式有关的,可以被继承,其他不能被继承;

       2)对于块级元素,如果宽度未设置,会继承最近父元素的宽度,高度未设置,由内容决定;

  • 相关阅读:
    docker运行jar包
    jQuery动态添加元素并绑定事件
    Ubuntu将软件(Sublime Text 2为例)锁定到启动器
    jQuery实现列表自动滚动
    浅谈css中的position属性
    关于jQuery中.attr()和.prop()的问题
    Python_opencv库
    Python_faker (伪装者)创建假数据
    Python_Tips_dumpload 和 dumpsloads 的区别与联系
    Linux_CentOS 7下Nginx服务器的安装配置
  • 原文地址:https://www.cnblogs.com/Amy-world/p/9925095.html
Copyright © 2011-2022 走看看