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. Linux 进程间通信系列之 信号

    信号(Signal) 信号是比较复杂的通信方式,用于通知接受进程有某种事件发生,除了用于进程间通信外,进程还可以发送信号给进程本身:Linux除了支持Unix早期信号语义函数sigal外,还支持语义符 ...

  2. Java基础04-数据的输入

    1.为什么要有数据的输入? 实现人机进行交互 2.什么是数据的输入? 利用扫描仪Scanner进行数据输入 3.怎么使用扫描仪Scanner? (1)放在类声明之前,引入扫描仪 import java ...

  3. PyCharm5 破解汉化

    作者博文地址:https://www.cnblogs.com/liu-shuai/ 破解: 将下列序列号复制到软件激活界面即可破解. 43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0 ...

  4. jQuery源代码学习笔记_工具函数_noop/error/now/trim

    jQuery源代码学习笔记_工具函数_noop/error/now/trim jquery提供了一系列的工具函数,用于支持其运行,今天主要分析noop/error/now/trim这4个函数: 1.n ...

  5. Window WindowManager 和WindowManager.LayoutParams

    <一> Window window是android中的窗口,表示顶级窗口的意思,也就是主窗口,它有两个实现类, PhoneWindow和MidWindow,我们一般的activity对应的 ...

  6. 语文，数学，ps

    数学教2课以集合为主. 集合:是指具有某种特定性质的具体的或抽象的对象汇总成的集体,这些对象称为该集合的元素. 特点:确定性给定一个集合,哪些对象是这个集合元素,不允有模棱两可的情况.互用性任何两个元 ...

  7. Java之通过反射机制选择servlet中的对应的方法

    此方法用于在对Javaee开发中的通过对应的名称而选择servlet中的对应的方法 注:主要代码如下 protected void doGet(HttpServletRequest req, Http ...

  8. ORA-12514:TNS：监听程序当前无法识别连接描述符中请求的服务解决办法

    ORA-12514:TNS:监听程序当前无法识别连接描述符中请求的服务解决办法: 1.首先打开cmd命令 查看本地TNSPING配置 是否ok?然后找到 Oracle 安装文件 中 listener. ...

  9. 在 eclipse 中调出其内置的浏览器

    两种方法: 1.点击工具栏中的浏览器图标,就会在主面板中出现浏览器: 跳出一个blank页面,如下: 第二种方法:点击Window——Show view——Other 输入 "browser ...

  10. MyBatis中sql语句

    一.select <!-- 查询学生,根据id --> <select id="getStudent" parameterType="String&qu ...