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. git使用笔记-比较分支差异

    比如我们有 2 个分支:master, dev,现在想查看这两个 branch 的区别,有以下几种方式: 1.查看 dev 有,而 master 中没有的: git log dev ^master 同 ...

  2. Windows 10家庭版升级到专业版，系统蓝屏

    Log Name: SystemSource: Microsoft-Windows-DistributedCOMDate: 9/9/2018 7:56:57 PMEvent ID: 10016Task ...

  3. 安卓多个RecyclerView滑动与显示问题

    最近在项目遇到这样的问题:在一线性垂直布局内,有两个垂直的RecyclerView,如果直接高度直接设置wrap-content, 通常会导致滑动冲突或是内容显示不全. 首先说下解决的思路,就是在最外 ...

  4. php用户注册页面利用js进行表单验证

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 关于webform textbox Password 模式

    textbox在这个模式时,如果进行点击按钮或者其他与后台交互的操作,则状态不会保留,既密码框内容会被清空: 这个可以在前台使用 隐藏控件加js获取密码框内容赋值到隐藏控件,点击刷新后通过后台为密码框 ...

  6. Props 和 IActorRef 3

    在Actor模式中我们使用IActorRef通过ActorSystem来发送消息数据.这么做有两个理由 1.ActorSystem会在消息中封装一些元数据(metadata),这些数据我们可以通过上下 ...

  7. Python 连接Sql Server数据库 MSSql

    Python 想要和MSSql数据库进行交互,首先要下载名为"pymssql"的包,然后import该包即可. 地址:https://pypi.python.org/pypi/py ...

  8. git 提交各种情况下的处理方式

    自己总结: 01.若在提交过程中有冲突,解决冲突后,git add . git rebase —continue git push for   02.git rebase vs git merge g ...

  9. better-scroll 遇到的问题 2

    问题的描述: 在歌曲列表页面使用了scroll插件,搜索了很多歌曲,页面出现滚动,选择播放一首歌曲,弹出播放器,将播放器最小化,页面回到歌曲列表,并且页面的底部出播放歌曲的信息(在没有播放歌曲的时候是 ...

  10. table表格td内内容自动换行

    项目开发时,遇到问题:td内传入数据,全是字母,不会自动换行 一般字母数字/特殊符号的话,会被浏览器默认是一个字符串或者说一个单词,不会自动换行 所以需要设置一下,让表格内容自动换行. 1.给td标签 ...