CSS有两大特性:  继承性和层叠性

继承性

面向对象语言都会存在继承的概念 , 在面向对象语言中, 继承的特点:  继承了父类的属性和方法.  那么 css  就是在设置属性的 ,  不会牵扯到方法的层面.

继承 :  给父级设置一些属性 , 子级继承了父级的该属性 ,  这就是我们的css中的继承.

记住 :  有一些属性是可以继承下来 : color  ;   font-* ;  text- ;   line- ;       主要是文本级的标签元素.

盒模型的属性是不可以继承下来的

a 标签有特殊情况 , 设置a 标签的字体颜色  一定要选中a , 不要使用继承性

但是像一些盒子元素属性 , 定位的元素 (浮动 , 绝对定位 , 固定定位)  不能继承.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        /*.box p span{

            color: red;

        }*/

        .box{

            color: red;

        }

        .box a{

            color: yellow;

        }

        .box p{

            color: green;

            font-size: 30px;

            line-height: 30px;

            background-color: red;

            text-align: right;

        }

        span{

            background-color: transparent;

        }

    </style>

</head>

<body>

    <div class="box">

        日天

        <a href="#">百度</a>

        <p>

            wusir

            <span>alex</span>

        </p>

    </div>

</body>

</html>

例如:

层叠性

层叠性 :   权重的标签覆盖掉了权重小的标签 ,  说白了 , 就是被干掉了

权重 :  谁的权重大 , 浏览器就会显示谁的属性 

数 :   id  的数量    class 的数量    标签   的数量  ,  顺序不能乱

/*1  0  0 */显示红色

#box{

    color: red;

}

/*0  1  0*/

.container{

    color: yellow;

}

/*0  0  1*/

p{

    color: purple;

}

升级版

1     <div id='box1' class="wrap1">

2         <div id="box2" class="wrap2">

3             <div id="box3" class="wrap3">

4                 <p>再来猜猜我是什么颜色？</p>

5             </div>

6         </div>

7     </div>

升级版

        #box1 #box2 p{

            color: yellow;

        }

        #box2 .wrap3 p{

            color: red;

        }

        div div #box3 p{

            color: purple;

        }

        div.wrap1 div.wrap2 div.wrap3 p{

            color: blue;

        }

升级版

还是上面那个html结构，如果我设置以下css，会显示什么颜色呢。

1         #box2 .wrap3 p{

2             color: yellow;

3         }

4

5         #box1 .wrap2 p{

6             color: red;

7         }

答案是红色  .  结论 :  当权重一样的时候  是以后来设置的属性为准 , 前提必须权重一样 ,  后来者居上 .

#box1 #box2 .wrap3{

    color: red;

}

#box2 .wrap3 p{

    color: green;

}

这个是绿色的  ,     第一条css设置的属性值 , 是通过继承性设置成的红色 , 那么继承来的属性, 他的权重为0 , 他没有资格跟我们下面选中的标签对比.

那么同为被继承来的属性则:

#box1 #box2 .wrap3{

    color: red;

}

.wrap1 #box2{

    color: green;

}

事实证明 :   权重都是0 :  那么就是  " 就近原则"  :  谁描述的近  ,  就显示谁的属性 , 所谓描述的近 , 就是选中到最内层的距离越近.

层叠权重形同处理

第一种现象 :  当权重相同时 , 以后来设置的属性为准  , 前提一定要权重相同

#box2 .wrap3 p{

    color: yellow;

}

#box1 .wrap2 p{

    color: red;

}

我们会发现此时显示的是红色的.

第二种现象 :  第一个选择器没有选中内层标签, 那么它是通过继承来设置的属性 , 那么它的权重为 0 , 第二个选择器中了内层标签 , 有权重.

所以   继承来的元素  权重为 0 , 跟选中的元素没有可比性 .

#box1 #box2 .wrap3{

    color: red;

}

#box2 .wrap3 p{

    color: green;

}

我们会发现此时显示的是绿色的

第三种现象：如果都是继承来的属性，谁描述的近，显示谁的属性。'就近原则'

#box1 #box2 .wrap3{

    color: red;

}

 .wrap1 #box2{

    color: green;

}

了解:

!important 的使用。

！important:设置权重为无限大

!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局

了解

总结 :

  1. 行内 > id > class >  标签  *****
  2. 数数   数 　　id     class     标签
  3. 先选中标签 , 权重一样 , 以后设置为主
  4. 继承来的属性  它的权重为0  ,   与选中的标签没有可比性
  5. 如果都是继承来的属性 ,   保证就近原则
  6. 都是继承来的属性 , 选择的表标签一样近, 再去数权重

04.CSS的继承性和层叠性的更多相关文章

  1. python 全栈开发，Day47(行级块级标签,高级选择器,属性选择器,伪类选择器,伪元素选择器,css的继承性和层叠性,层叠性权重相同处理,盒模型,padding,border,margin)

    一.HTML中的行级标签和块级标签 块级标签 常见的块级标签:div,p,h1-h6,ul,li,dl,dt,dd 1.独占一行,不和其他元素待在同一行2.能设置宽高3.如果不设置宽高,默认为body ...

  2. 前端----css的继承性和层叠性

    css有两大特性; 继承性和层叠性 继承性 继承:给父级设置一些属性,子级继承了父级的该属性, 这就是我们的css中的继承, 需要注意的是 有一些属性是可以继承下来的: color   ,  font ...

  3. CSS的继承性和层叠性

    1.继承性 比不是所有的属性都能继承,只有一些文本的属性才能被继承.比如:color,text-开头的,line-开头的,font-开头的.这几种属性才能被继承. 其余的关于盒子,定位,布局的都不能被 ...

  4. CSS样式----CSS的继承性和层叠性（图文详解）

    CSS的继承性 我们来看下面这样的代码,来引入继承性: 上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性.于是我们得到这样的结论: 有一些属性 ...

  5. 【WEB前端】CSS继承性和层叠性（极度重要）

    1.1 继承性 有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性. 哪些属性能继承? color. text-开头的.line-开头的.font-开头的. 这些关于文字样式的,都能 ...

  6. css 两大特性:继承性和层叠性

    css 有两大特性: 继承性和层叠性, 继承性 面向对象语言都会存在继承的概念,在面向对象的语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css中没有方法,所以我们仅仅继承属 ...

  7. css 继承性和层叠性

    css有两大特性:继承性和层叠性 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设置属性的.不会牵扯到方法的层面 ...

  8. CSS(4)---三大特性(继承性，层叠性，优先级)

    CSS(4)---三大特性(继承性,层叠性,优先级) CSS有三大特性分别是: 继承性,层叠性,优先级. 一.继承性 概念 给父元素设置一些属性,子元素也可以使用,这个我们就称之为继承性. 注意 1. ...

  9. 前端 CSS 继承性和层叠性

    CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important

随机推荐

  1. OC-通知+Block

    =================================== 一.通知(NSNotification) NSNotification 通知类,这个类中有 NSNotificationCent ...

  2. java学习网站推荐

    推荐大家一个好的java学习网站: http://www.programcreek.com/java-api-examples/index.php 可以找到api对应的开源项目使用的代码.

  3. Compiling OpenGL games with the Flash C Compiler (FlasCC)

    Compiling OpenGL games with the Flash C Compiler (FlasCC) In this article I show how to use the Flas ...

  4. （三十七）js改变this指向的方法

    最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧. 1.改变函数内部的this指向的三种方法 ...

  5. IntelliJ IDEA下SVN配置及使用

    一.在IDEA中使用SVN,首先需要下载安装 TortoiseSVN 插件. 打开 TortoiseSVN 下载地址,选择适合自己的系统类型下载. 接下来,进行安装即可.选择Modify,默认 com ...

  6. 小而实用的工具插件集锦（JQGrid,zTree）

    jqgrid,JQGrid是一个在jquery基础上做的一个表格控件,看起来感觉还可以,以ajax的方式和服务器端通信 效果图: 这个小东西,多用在在工作流上面. 中文文档: http://blog. ...

  7. 启动tomcat7w.exe提示"指定的服务未安装"

    说下本人的情况:因为重装系统,安装在C盘的tomcat的失去作用.想要启动tomcat7w.exe(这是管理服务的)出现“指定服务未安装,无法打开tomcat7服务”的提示.原因是重装系统也导致之前安 ...

  8. 【msdn】RESTful 服务（配备 WCF）介绍

    原文地址:http://msdn.microsoft.com/zh-cn/magazine/dd315413.aspx RESTful 服务(配备 WCF)介绍 Jon Flanders 代码下载位置 ...

  9. Hive中使用Python实现Transform时遇到Broken pipe错误排查

    Hive中有一表,列分隔符为冒号(:),有一列utime是Timestamp格式,需要转成Weekday存到新表. 利用Python写一个Pipeline的Transform,weekday.py的代 ...

  10. [转]Mac上的抓包工具Charles

    $*********************************************************************************************$ 博主推荐 ...