首先声明一下CSS三大特性——继承、优先级和层叠。继承即子类元素继承父类的样式，比如font-size,font-weight等f开头的css样式以及text-align,text-indent等t开头的样式以及我们常用的color。简单的就不演示了，强调一下font-size这个东东(虽然也有继承，但是标签不同继承的效果也不一样)，比如下面的代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .fonts {

            font-size: 20px;

        }

    </style>

</head>

<body>

    <div class="fonts">

        <p id="p">我的字体大小为20px</p>

        <h1 id="h1">我的字体大小为40px</h1>

    </div>

</body>

</html>

我给p和h1标签的父元素div设一个font-size为20px，p没有问题，继承了div的20px，但h1却变为了40px，我们从下面的JS代码可以获取。

为什么h1会是40px呢？因为h1的默认样式为2em（32px）,如下图

，

并且h1默认的font-size为200%，因为div设了20px，所以通过继承h1的最终font-size为20*2=40px，要想使h1的标签字体大小也等于父标签div，只需设置h1 {font-size:100%;},如下图所示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .fonts {

            font-size: 20px;

        }

        h1 {

            font-size: 100%;

        }

    </style>

</head>

<body>

    <div class="fonts">

        <p id="p">我的字体大小为20px</p>

        <h1 id="h1">我的字体大小为20px</h1>

    </div>

</body>

</html>

下面我们再一起聊聊优先级这玩意，

!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性

额，好像有点复杂。那我们通过以下几个例子来证明吧。

方法——先看选择器是否命中对应的标签，命中后再根据权重来进行判断，权重的意思是数标签的数量，通过比较ID 类 标签 这三种选择器的数量来决定谁的优先级最高。当数量相同时，通过层叠（后者覆盖前者）来决定。

最后显示绿色，因为虽然!important优先级最高，但是没有继承性，li的颜色继承自ul.

答案是yellow，因为三者都可以命中元素，所以通过权重判断，第一个没有ID选择器PASS掉，第二个和第三个一样，通过层叠（第三覆盖第二）决定颜色。

html是一个嵌套了12个div的复杂盒子，最里面的div有me这个类，判断方法：都可以命中元素，所以通过权重，类选择器>元素选择器，所以选择blue.

都可以命中对应元素，权重第一个大于第二个（比较标签选择器数量），显示blue.

先通过是否命中对应元素排除第四和第五个样式，然后根据权重比较一二三——第一个： 两个ID ;第二个：一个ID一个类;第三个：两个类。所以根据权重ID>类 ，最后显示blue.

答案是blue，第二个没有命中PASS掉，第一个和第三个比较权重，由于第一个没有类，所以答案是blue。

最后总结一下优先级、层叠与权重的关系——

层叠是css的一个特性，如果两个相同的属性作用于同一标签，它们会发生层叠。如果多个复合选择器，同时作用于我们的同一标签，优先级就不好计算了，就要计算权重，通过比较权重，来先出优先级最高的选择器。

如何计算权重：

（数标签的数量）先数id,如果id相等再数类如果id不相等id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。

注意：比较权重的时候一定要注意：我们的选择器一定要命中对应的标签才可能让标签拥有对应的属性。

CSS三大特性（继承、优先级、层叠）之个人见解的更多相关文章

  1. CSS三大特性之优先级顺序

    id选择器>类选择器>标签选择器>通配符>继承>浏览器默认

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

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

  3. CSS.02 -- 样式表 及标签分类（块、行、行内块元素）、CSS三大特性、背景属性

    样式表书写位置  内嵌式写法 <head> <style type="text/css"> 样式表写法 </style> </head&g ...

  4. CSS 三大特性 层叠 继承 优先级

    css三大特性 层叠性: 如果一个属性通过两个相同选择器设置到同一个元素上,相同的属性就会出现冲突,那么这个时候一个属性就会将另一个属性层叠掉,采用的是就近原则 继承性: 子标签会继承父标签的某些样式 ...

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

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

  6. Css - 三大特性

    css - 三大特性 1.层叠性 如果通过两个相同选择器设置了同一个元素的某个相同的css属性,按照css相同属性的出现顺序,后面的样式会覆盖前面的样式 2.继承性 祖先元素的关于文本的样式会遗传给后 ...

  7. python 之 前端开发（CSS三大特性、字体属性、文本属性、背景属性）

    11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性​2.注意:    1.只有以color.font-.text-.l ...

  8. H5 26-CSS三大特性之优先级

    26-CSS三大特性之优先级 类>标签>通配符>继承>浏览器默认 --> 0 我是段落 <!DOCTYPE html> <html lang=" ...

  9. [.net 面向对象编程基础] (12) 面向对象三大特性——继承

    [.net 面向对象编程基础] (12) 面向对象三大特性——继承 上节我们说了面向对象的三大特性之一的封装,解决了将对同一对象所能操作的所有信息放在一起,实现统一对外调用,实现了同一对象的复用,降低 ...

随机推荐

  1. python2.7练习小例子（二十四）

        24):1.题目:利用递归方法求5!.     程序分析:递归公式:fn=fn_1*4! #!/usr/bin/python # -*- coding: UTF-8 -*- def fact( ...

  2. h5调试工具

    1.Safari:iPhone 调试利器,查错改样式首选: 2.iOS 模拟器:不需要真机,适合调试 Webview 和 H5 有频繁交互的功能页面: 3.Charles: Mac OS 系统首选的抓 ...

  3. hdu1233 继续畅通工程 （最小生成树——并查集）

    还是畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Sub ...

  4. CDH-5.9.2整合spark2

    1.编写目的:由于cdh-5.9.2自带spark版本是spark1.6,现需要测试spark2新特性,需要整合spark2, 且spark1.x和spark2.x可以同时存在于cdh中,无需先删除s ...

  5. hadoop与mysql数据库的那点事

        转眼间已经接触了hadoop两周了,从之前的极力排斥到如今的有点喜欢,刚开始被搭建hadoop开发环境搞得几乎要放弃,如今学会了编写小程序,每天都在成长一点挺好的,好好努力,为自己的装备库再填 ...

  6. 使用fiddler和jmeter进行简单的接口测试。

    初学接口测试,以下内容是记录首次使用fiddler和jmeter进行接口测试的步骤,可能步骤有点繁琐,如果有不对的地方,欢迎大家指正. 准备活动: 1.打开fiddler,打开fiddler以后会自动 ...

  7. 用Fluent实现MySQL到ODPS数据集成

    安装ruby 首先通过 /etc/issue 命令查看当前使用centos是哪个版本: [hadoop@hadoop03 ~]$  cat /etc/issue 由于centos版本是6.6,安装ru ...

  8. Python音频处理（一）音频基础知识-周振洋

    1.声音音频基础知识 (1)声音是由震动产生,表现为波的形式.波有频率,振幅等参数.对于声波而言:频率越大,音调越高,反之越低.振幅越大,声音越大,反之越小. (2)采样率,帧率:波是连续(无穷)的, ...

  9. LeetCode 全解(bug free 训练)

    1.Two Sum Given an array of integers, return indices of the two numbers such that they add up to a s ...

  10. 目标检测之Faster-RCNN的pytorch代码详解(模型准备篇)

    十月一的假期转眼就结束了,这个假期带女朋友到处玩了玩,虽然经济仿佛要陷入危机,不过没关系,要是吃不上饭就看书,吃精神粮食也不错,哈哈!开个玩笑,是要收收心好好干活了,继续写Faster-RCNN的代码 ...