1.css优先级以及继承

css具有两大特性：继承性和层叠性

继承性

继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。

有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。

但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。

层叠性

层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
权重： 谁的权重大，浏览器就会显示谁的属性

权重大小比较方法：

样式表中的特殊性描述了不同规则的相对权重，它的基本规则是：

1 内联样式表的权值最高               style=""－－－－－－－－－－－－1000；

2 统计选择符中的ID属性个数。       #id －－－－－－－－－－－－－－100

3 统计选择符中的CLASS属性个数。 .class －－－－－－－－－－－－－10

4 统计选择符中的HTML标签名个数。 p －－－－－－－－－－－－－-－1

按这些规则将数字符串逐位相加，就得到最终的权重，然后在比较取舍时按照从左到右的顺序逐位比较。

例1：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

    /*1 0 0*/

        #box{

            color: green;

        }

        /*0 1 0*/

        .container{

            color: yellow;

        }

        /*0 0 1*/

        p{

            color: red;

        }

    </style>

</head>

<body>

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

        赵云是什么颜色

    </p>

</body>

</html>

例2

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        /*2 0 1*/

        #box1 #box2 p{

            color: red;

        }

        /*2 1 1*/

        #box1 #box2 .wrap3 p{

            color: yellow;

        }

        /*0 3 4*/

        div.wrap1 div.wrap2 div.wrap3 p{

            color: green;

        }

        /*3 0 1*/

        #box1 #box2 #box3 p{

            color: pink;

        }

    </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>

例3：权重相同处理

当权重一样的 后来者居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        #box2 .wrap3 p{

            color: yellow;

        }

        #box1 .wrap2 p{

            color: red;

        }

    </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>

例4：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

    /*继承的权重是0*/

        /*#box1 .wrap2{

            color: red;

        }

        #box2 .wrap3 p{

            color: yellow;

        }*/

        /*权重为0。就近原则 谁描述的近*/

        /*#box1 .wrap3{

            color: green;

        }

        #box1 .wrap2{

            color: red;

        }*/

        #box1 .wrap2 .wrap3{

             color: red !important;

        }

        .wrap1 #box2 .wrap3{

            color: green;

        }

    </style>

</head>

<body>

    <!-- 当权重一样的 后来者居中 -->

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

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

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

                <p style=''>再来猜猜我是什么颜色？</p>

            </div>

        </div>

    </div>

</body>

</html>

技巧：

1.先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性
3.继承来的，描述的一样近，数权重
4.继承来的，描述的一样近，权重一样，后来者居上

前端css优先级以及继承的更多相关文章

  1. 前端 CSS 优先级 样式设置important

    !important 的使用. !important方式来强制让样式生效,但并不推荐使用.因为如果过多的使用!important会使样式文件混乱不易维护. 万不得已可以使用!important 现在选 ...

  2. 前端——CSS

    CSS CSS是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部导入,比较三种方式的优缺点. 语法:style = ...

  3. web前端----css选择器样式

    一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...

  4. Python之路【第十九篇】:前端CSS

    CSS 一.CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠式样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 学CSS后我们需要掌握的技能: 1. ...

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

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

  6. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  7. CSS的优先级和继承问题

    CSS的优先级和继承问题 ★CSS的冲突,即优先级 CSS本身的设置可以同时应用多个样式在同一个元素,此时样式之间可能出现冲突而达不到用户所想要的效果. ★解决CSS冲突的优先级规则: ● CSS层叠 ...

  8. css优先级计算规则

    原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没 ...

  9. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

随机推荐

  1. 转换Excel格式

    做一个功能需要将excel2003格式转成2007的格式,代码如下 需要引用office的microsoft.office.interop.excel.dll var app = new Micros ...

  2. maya安装不了

    AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...

  3. 【转】Android 中的 Service 全面总结

    1.Service的种类   按运行地点分类: 类别 区别  优点 缺点   应用 本地服务(Local) 该服务依附在主进程上,  服务依附在主进程上而不是独立的进程,这样在一定程度上节约了资源,另 ...

  4. spring aop xml中配置实例

    http://blog.csdn.net/wangpeng047/article/details/8560694

  5. position:fixed相对父级元素定位而不是浏览器

    position:fixed默认是相对浏览器定位的 原理:fixed定位相对父级容器定位,不添加:top,bottom,left,right样式,通过margin定位 代码:http://jsbin. ...

  6. 【起航计划 027】2015 起航计划 Android APIDemo的魔鬼步伐 26 App->Preferences->Preferences from XML 偏好设置界面

    我们在前面的例子Android ApiDemo示例解析(9):App->Activity->Persistent State 介绍了可以使用Shared Preferences来存储一些状 ...

  7. Python基础学习-列表基本操作

     列表:Python的“苦力”.   列表不同于元组和字条串的地方:列表是可变的——可以改变列表的内容,并且列表有很多有用的.专门的方法. 1.list函数 因为字符串不能像列表一样被修改,所有有时根 ...

  8. 笨办法学Python（八）

    习题 8: 打印,打印 formatter = "%r %r %r %r" print formatter % (1, 2, 3, 4) print formatter % (&q ...

  9. 给网站添加图标： Font Awesome

    先贴上各种图标的网址:https://fontawesome.com/?from=io 1.打开网址,我们可以看到: 像我这种英语不好的,直接用谷歌浏览器进行翻译中文好了,自己还是有点B数的····· ...

  10. Object-C 语法 字符串 数组 字典 和常用函数 学习笔记

    字符串 //取子字符串 NSString *str1=@"今天的猪肉真贵,200块一斤"; NSString *sub1=[str1 substringFromIndex:4]; ...