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. SQL 还原或备份失败数据库变成单个用户模式无法访问

    还原数据失败了,数据库变成单个用户模式,无法操作了,执行下面的语句就可以了 USE master GO DECLARE @SQL VARCHAR(MAX); SET @SQL='' SELECT @S ...

  2. 2019.03.22 读书笔记 Linq中的IEnumerable与IQueryable

    Linq主要分为 Linq to object .Linq to XML .Linq to sql(现在都用EF了). 针对object和sql,微软分别设计了两套接口IEnumerable.IQue ...

  3. [转]使用jquery dataTable

    本文转自:http://blog.csdn.net/llhwin2010/article/details/8663753 jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表 ...

  4. (转)DNS解析过程详解

    DNS解析过程详解 原文:http://blog.csdn.net/crazw/article/details/8986504 先说一下DNS的几个基本概念: 一． 根域 就是所谓的“.”,其实我们的 ...

  5. 探讨PHP获取checkbox值

    如何才能正确的实现PHP获取checkbox值对于初学者来说还是比较陌生的.在这里我们将为大家详细介绍相关的实现方法,希望对大家有所帮助. > > > weeks后的中括号不可漏,否 ...

  6. pat05-图1. List Components (25)

    05-图1. List Components (25) 时间限制 200 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue For a ...

  7. Golang笔记（一）简洁的语言风格

    Golang笔记(一)简洁的语言风格 概述 Golang继承了很多C语言的风格,寡人使用了十几年C语言,切换到Golang时上手很快,并且随着深入的使用,越来越喜欢这门语言.Golang最直观的感受是 ...

  8. 浅谈SQL Server中的三种物理连接操作(Nested Loop Join、Merge Join、Hash Join)

    简介 在SQL Server中,我们所常见的表与表之间的Inner Join,Outer Join都会被执行引擎根据所选的列,数据上是否有索引,所选数据的选择性转化为Loop Join,Merge J ...

  9. node-sass 安装报错解决办法

    npm install安装node-sass时出现以下问题: Cannot download https://github.com/sass/node-sass/releases/download/v ...

  10. （一）JavaScript之[数据类型]与[对象]

    1].数据类型字符串(String).数字(Number).布尔(Boolean).数组(Array).对象(Object).空(Null).未定义 (Undefined). //极大或极小的数字可以 ...