标签（空格分隔）： css

css称为层叠样式表，CSS有两大特性：继承性和层叠性，本章简单介绍一下继承性：

继承性：

定义：继承就是给父及设置了一些属性，子级继承了父及的该属性，这就是我们的css的继承，有一些属性可以继承，

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>继承性</title>

    <style type="text/css">

        .father{

            color:red;

        }

    </style>

</head>

<body>

<div class="father" id="egon">

    <p>wangwang</p>

</div>

</body>

</html>



问题：背景色是不是继承？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>继承性</title>

    <style type="text/css">

        .father{

            color:red;

            font-size: 30px;

            background-color: green;

        }

    </style>

</head>

<body>

<div class="father" id="egon">

    <p>wangwang</p>

</div>

</body>

</html>

  • 通过上述的例子，背景色不属于继承，P标签的标签是透明的，但是从肉眼看到的是绿色的，他是通过透明提现的，所以background是没有继承的；

哪些属性可以继承

color,

font-,

text-,

line-*

像一些盒子元素，定位元素（浮动，绝对，固定定位）不能继承，大家可以先了解一下；

层叠性：

这里先举个例子，大家猜猜如下的代码，P标签是什么颜色？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>层叠性</title>

    <style type="text/css">

        #box{

            color:red;

        }

        .container{

            color:yellow;

        }

    </style>

</head>

<body>

    <p id="box" class="container">

        猜猜我是什么颜色

    </p>

</body>

</html>

结果如下图：

问题：为什么显示为红色呢？代码不是从上往下执行的吗？

  • 答案：在css里面我们会讨论这个问题，在CSS里面有个权重的概念，谁的权重大，浏览器就会显示谁的属性；

例如：如下代码执行：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>层叠性</title>

    <style type="text/css">

        #box{

            color:red;

        }

        .container{

            color:yellow;

        }

        p{

            color:purple;

        }

    </style>

</head>

<body>

    <p id="box" class="container">

        猜猜我是什么颜色

    </p>

</body>

</html>
  • 执行结果：还是显示红色，为什么呢？
  • 那么如何判断谁的权重大？非常简单，就是数数：

    1.先数：id的数量；100

    2.在数：class数量010

    3.标签：数量001

    上述的代码：中当仅仅显示id的时候：这时候100我们只看id的时候，对应的ID是1，对应的类是0，对应的标签是0

    当显示：类的时候：010，这时候对应的ID是0，对应的类是1，对应的标签是0

    当显示：标签的时候：001对应的ID是0，对应的类是0，对应的标签是1；
  • 比较的方法：

    比较id的数量：如上述所述：id第一位是1，就不再进行后续的比较了；

    100----010---001；

    如上第一位比较大，就不在进行后续的比较了，如果第一位一样我们比较第二位，如果第二位比较大，我们不在进行比较就是显示第二位大的那个，如果第一位和第二位都一样的话，就继续比较；
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>层叠性</title>

    <style type="text/css">

        <!--这时候100我们只看id的时候，对应的ID是1，对应的类是0，对应的标签是0-->

        #box{

            color:red;

        }

        /*010，这时候对应的ID是0，对应的类是1，对应的标签是0*/

        .container{

            color:yellow;

        }

        /*001对应的ID是0，对应的类是0，对应的标签是1*/

        p{

            color:purple;

        }

    </style>

</head>

<body>

    <p id="box" class="container">

        猜猜我是什么颜色

    </p>

</body>

</html>

例如：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>权重</title>

    <style type="text/css">

        <!-- id 为2个0个类1个标签-->

        #box1 #box2{

            color:yellow;

        }

        /*1 1 1*/

        #box2 .wrap3{

            color:red;

        }

        /*1 0 3*/

        div div #box3 p{

            color:purple;

        }

        /*0 3 4*/

        div.wrap1 div.wrap2 div.wrap3 p{

            color:blue;

        }

    </style>

</head>

<body>

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

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

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

                <p>我是什么颜色</p>

            </div>

        </div>

    </div>

</body>

</html>

我们在比较的时候会先比较id的数量，然后比较类的数量，标签的数量；权重大的就是有限显示权重大的；

权重相同的处理

例如：下边的代码，权重一样的时候，应该怎么显示呢？应该显示后边的最新的权重；

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>权重</title>

    <style type="text/css">

        /*1 1 1*/

        #box1 .wrap2 p{

            color:red;

        }

        /*1 1 1*/

         #box2 .wrap3 p{

            color:yellow;

        }

    </style>

</head>

<body>

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

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

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

                <p>我是什么颜色</p>

            </div>

        </div>

    </div>

</body>

</html>

so:所以上述执行的颜色结果是：黄色；

问题：

通过上述的学习大家看看下边的例子的网页应该显示为什么颜色？

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>权重</title>

    <style type="text/css">

        /*2 1 0 */

        #box1 #box2 .wrap3{

            color:red;

        }

        /*1 1 1*/

         #box2 .wrap3 p{

            color:yellow;

        }

    </style>

</head>

<body>

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

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

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

                <p>我是什么颜色</p>

            </div>

        </div>

    </div>

</body>

</html>

根据我们以上的学习大家毫无疑问肯定是：红色；

颜色结果如下：

  • so:这里总结：我们会先看一下标签有没有被选中，选中了，就是开始数数(id ,class ,标签的数量，)谁的权重大就显示谁的属性，如果没有被选中，权重为0

    如果权重都是被继承下来的权重都是0，“就近原则”这里就近原则就是说谁描述的近；

css的继承和层叠的更多相关文章

  1. CSS系列：CSS的继承与层叠特性

    1. CSS的继承特性 所有的CSS语句都是基于各个标记直接的继承关系,CSS继承是指子标记会继承父标记的所有样式风格,并可以再父标记样式风格的基础上再加以修改,产生新的样式,而子标记的样式完全不会影 ...

  2. html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版

    继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...

  3. HTML+CSS学习笔记（9）- CSS的继承、层叠和特殊性

    标签:HTML+CSS 继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这 ...

  4. css的继承、层叠和特殊性

    1,继承  css的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代. 但注意有一些css样式是不具有继承性的.如border: ...

  5. CSS学习笔记之CSS的继承、层叠和特殊性

    继承 CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签 ...

  6. CSS 选择器继承和层叠

    CSS选择器及其继承特性.层叠特性1.基本选择器  标记  id  class  这个就不再作介绍了 2.复合选择器  交集 交集选择器由两个选择器直接连接构成,其结果是选中二者各自元素范围的交集 其 ...

  7. 从零开始学习html（九）CSS的继承、层叠和特殊性

    一.继承 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...

  8. css选择器---继承,优先级,层叠

    CSS三大特性—— 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  9. CSS选择器与CSS的继承,层叠和特殊性

    什么是选择器?选择器{样式;},在{}之前的部分就是"选择器","选择器"指明了{}中的"样式"的作用对象,也就是"样式" ...

随机推荐

  1. oc 语法基础

    1:https://mp.weixin.qq.com/s/IqICB4aW2vZdU0382S9sTA  <1-7高质量OC代码> 2:https://blog.csdn.net/qq_3 ...

  2. 如何开启 MySQL InnoDB 共享表空间和独立表空间

    修改数据库的表空间管理方式 修改my.ini文件的innodb_file_per_table的参数值即可,但是修改不能影响之前已经使用过的共享表空间和独立表空间: innodb_file_per_ta ...

  3. C++ 重定义、重载、覆盖

    想要用好C++继承和类自身函数实现就必须了解C++得三个概念重定义(redefine).重载(overload).重写(override). 一 基本感念 1 重定义(redefine) 派生类对基类 ...

  4. 小程序sitemap配置

    这几天在官网文档中发现小程序也支持索引了链接,就是是在根目录下新建sitemap.json 文件. { "rules": [ { "action": " ...

  5. windows环境下ElasticSearch6 安装head插件

    转: https://blog.csdn.net/shubingzhuoxue/article/details/80998738 https://blog.csdn.net/camelcanoe/ar ...

  6. 喜怨交加C++

    作为被高中理综折磨几年立誓大学不学理工科类的文字爱好者,会学计算机是个意外.出于对理工科的不感兴趣,暑假期间也没有预习过编程知识.在对编程进行学习之前,我将它视为一门科目.一个专业.一项技能,唯独不是 ...

  7. WordPress版微信小程序3.5版发布

    最近花时间对WordPress版微信小程序做了一些完善和调整,修复不少程序的问题.一个程序的完善是持续和渐进的,没有最好,只有更完善.虽然会采纳一些用户的建议和意见,但我会从一个产品角度去考虑,哪些功 ...

  8. C#将unix时间戳转换成.net的DateTime类型的代码

    下面的内容是关于C#将unix时间戳转换成.net的DateTime类型的内容. DateTime epoch = new DateTime(1970,1,1,0,0,0,0, DateTimeKin ...

  9. vue-cli 发布部署IIS

    有些时候我们的服务器不用的是node,也许是IIS,这样就需要把工程构建出来,与IIS集成. 构建的命令如下 cnpm run build 将其中的dist文件夹拷贝出来,放到IIS的发布目录,在浏览 ...

  10. QMap迭代器

    QMap<int, QString> intToStr; intToStr[] = "test" for (auto iter = intToStr.begin(); ...