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. RTT之AT命令组件

    包含客户端和服务器:用于GPRS和3G的通讯命令格式.四种基本功能 测试功能:AT+<x>=? 用于查询命令参数格式及取值范围: 查询功能:AT+<x>? 用于返回命令参数当前 ...

  2. 3d Max 2014安装失败怎样卸载3dsmax?错误提示某些产品无法安装

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

  3. UGUI RectTransform 矩形变换

    UGUI游戏对象基本都有这个组件. float radius; radius = GetComponent<RectTransform>().sizeDelta.x; radius = ( ...

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

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

  5. [转]AngularJS 使用 UI Router 实现表单向导

    本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...

  6. (转)Shell脚本之break,continue,和exit区别

    Linux脚本中的break continue exit return break结束并退出循环 continue在循环中不执行continue下面的代码,转而进入下一轮循环 exit退出脚本,常带一 ...

  7. 01-取消文件与svn服务器的关联

    有的时候一个和svn服务器关联的文件,svn的链接已经失效,但是文件还是显示和svn关联的状态. 下面主要是解决怎么取消一个文件和svn服务器的关联. 1 新建一个文本文件 在任意目录下新建一个文本文 ...

  8. Functional language(函数式编程语言)初步了解

    对于函数式语言并不太了解,查询了百度.博客.知乎等做了以下总结. What 函数式语言(functional language)一类程序设计语言,是一种非冯·诺伊曼式的程序设计语言.函数式语言主要成分 ...

  9. 《Head First 设计模式》之状态模式——糖果机

    状态模式(State) ——允许对象在内部状态时改变它的行为,对象看起来好像修改了它的类. 策略模式与状态模式的区别 状态主体(拥有者)持有状态对象,运行时可以通过动态指定状态对象来改变类的行为 策略 ...

  10. 粗看ES6之JSON

    标签: es6 ES6新增JSON特性不是特别多,只是针对JSON某些情况下的写法上有一些优化: 当key值和value值对应变量名相同时 json对像中的方法书写 示例代码如下: <!DOCT ...