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. TCP/IP协议<一>

    下面是协议层从底层至顶层的一个模型图: 一.计算机网络的背景 1.1 计算机的发展 有人说:“20世纪最伟大的发明就是计算机”,自诞生伊始,计算机经历了一系列发展,从大型通用计算机.超级计算机.小型机 ...

  2. Android 中怎么重新启动APP或系统

    重新启动应用程序,有两种方法,分别是: 1.通过ActivityManager来重新启动应用程序: ActivityManager manager = (ActivityManager)this.ge ...

  3. （转）mysql5.6.7多实例安装、配置的详细讲解分析及shell启动脚本的编写

    一.mysql安装 1.下载mysql数据库源码包: wget http://cdn.mysql.com/Downloads/MySQL-5.6/mysql-5.6.27.tar.gz 2.安装mys ...

  4. stm32 窗口看门狗学习（一）

    什么是窗口看门狗? 1)独立看门狗                限制喂狗时间在0-x内,x由相关寄存器决定.喂狗的时间不能过晚. 2)窗口看门狗               之所以称为窗口就是因为其 ...

  5. Python常用模块二

    一.time & datetime #_*_coding:utf-8_*_ import time # print(time.clock()) #返回处理器时间,3.3开始已废弃 , 改成了t ...

  6. textarea输入框显隐文字

    html: <textarea class="dxtd_text"></textarea> javascript: //管理端短信 var textarea ...

  7. 存储过程 返回值 procedure return values

    存储过程有三种返回: 1. 用return返回int型数据 2. 用返回参数返回结果,可以返回各种数据类型(通过游标来循环查询结果每一行) 3. 直接在存储过程中用select返回结果集,可以是任意的 ...

  8. spring boot Configuration Annotation Proessor not found in classpath

    出现spring boot Configuration Annotation Proessor not found in classpath的提示是在用了@ConfigurationPropertie ...

  9. MongoDB之mongodb.cnf配置

    # mongodb3.2.1 的主配置文件,将此文件放置于 mongodb3.2.1/bin 目录下 # hapday 2016-01-27-16:55 start # 数据文件存放目录 dbpath ...

  10. TP5.0搭建restful API 应用

    1.配置环境变量,如果没配置会显示如下错误. 配置方法 1)右键此电脑-> 属性-> 高级系统设置->环境变量->Path 2)在Path后加上php目录的名称 如:E:\PH ...