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. Python基础学习（第7天）

    第6课 1.循环对象:包括一个next方法,这个方法的目的是进行到下一个结果,结束后抛出StopInteration异常: 当循环结构如for循环调用一个循环对象时,每次循环的时候都会调用next方法 ...

  2. 2017.11.18 IAP下载（STM8，PIC，STM32）

    客户要求用IAP下载,mark一下,客户还给了stm32的引导码.仅供参考. 1 PIC单片机的IAP  2 STm32 IAP https://www.cnblogs.com/WeyneChen/p ...

  3. css3 伪类

    ::selection { 选中后的样式 } 链接 p:only-child     p的父级只有一个p标签 p:only-of-type   p的父级有一个p标签, 但还可以包含其他标签 p:fis ...

  4. Android 静默安装/后台安装& Root permission

    Android 静默安装/后台安装& Root permission 静默安装其实很简单,今天在网上找资料找半天都说的很复杂,什么需要系统安装权限.调用系统隐藏的api.需要系统环境下编译.需 ...

  5. Qt中内存泄露和退出崩溃的问题

    http://blog.csdn.net/wangkuiyun/article/details/7412379

  6. debounce与throttle区别

    在2011年,Twitter网站曾爆出一个问题:在主页往下滚动时,页面会变得缓慢以致没有响应.John Resig发表了一篇文章< a blog post about the problem&g ...

  7. H5 pattern

    pattern:正则表达式验证 例如: <input pattern="1[3578]\d{9}">  可以省略^和$ 必须和required配合使用,否则在用户没有输 ...

  8. Java [Leetcode 347]Top K Frequent Elements

    题目描述: Given a non-empty array of integers, return the k most frequent elements. For example,Given [1 ...

  9. C# 在类文件自动添加文件注释的方法

    对于vs2013来讲, 步骤: 1.VS2013 中找到(安装盘符以C盘为例)C:\ProgramFiles(x86)\Microsoft VisualStudio12.0\Common7\IDE\I ...

  10. 【java反射】Class类型的相关操作演练

    [一]获取范型接口的实现类的范型类型 (1)范型接口 package org.springframework.context; import java.util.EventListener; publ ...