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. lftp使用

    lftp -c 'pget -n 5 ftp://user:password@ftpserver/test.txt'  5 线程数 安装: yum install lftp -y使用语法:lftp - ...

  2. Neutron的防火墙原理

    确切的说这是fwaas,即防火墙即是服务. 防火墙与安全组区别防火墙一般放在网关上,用来隔离子网之间的访问.因此,防火墙即服务也是在网络节点上(具体说来是在路由器命名空间中)来实现. 安全组的对象是虚 ...

  3. volatile关键字与内存可见性

    前言 首先,我们使用多线程的目的在于提高程序的效率,但是如果使用不当,不仅不能提高效率,反而会使程序的性能更低,因为多线程涉及到线程之间的调度.CPU上下文的切换以及包括线程的创建.销毁和同步等等,开 ...

  4. .html() .text() .val() 的区别

    .html()用为读取和修改元素的HTML标签(包括其Html标签) .text()用来读取或修改元素的纯文本内容 (包括其后代元素) .val()用来读取或修改表单元素的value值.(只能用于表单 ...

  5. ubuntu 交叉编译arm linux 内核小例子

    下载arm-linux-gcc 4.2.3http://code.google.com/p/princess-alist/downloads/detail?name=arm-linux-gcc-4.3 ...

  6. Android onTouchEvent和setOnTouchListener中onTouch的区别

    OnTouchEvent()方法 是获取的对屏幕的各种操作,比如向左向右滑动,点击返回按钮等等. 属于一个宏观的屏幕触摸监控. OnTouchListener()方法 是获取某一个控件某一个View的 ...

  7. PenMount Touch显示鼠标指针驱动安装

    /******************************************************************************* * PenMount Touch显示鼠 ...

  8. [QT][问题记录]发布软件时遇到的问题

    2017-3-9 11:22:13 无法定位程序输入点 _ZdaPvj 于动态链接库 libstdc++-6.dll 上. 这是在自己机器上出现的问题. 使用cmd 进行命令 windeployqt  ...

  9. echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.

    一:错误描述:echarts.js:1136 Uncaught Error: Initialize failed: invalid dom. 二:错误原因:echarts在用json数据请求时未调用 ...

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

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