前端css优先级以及继承
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优先级以及继承的更多相关文章
- 前端 CSS 优先级 样式设置important
!important 的使用. !important方式来强制让样式生效,但并不推荐使用.因为如果过多的使用!important会使样式文件混乱不易维护. 万不得已可以使用!important 现在选 ...
- 前端——CSS
CSS CSS是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化. 存在方式有三种:元素内联.页面嵌入和外部导入,比较三种方式的优缺点. 语法:style = ...
- web前端----css选择器样式
一.css概述 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,对html标签的渲染和布局 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明. 例如 二.c ...
- Python之路【第十九篇】:前端CSS
CSS 一.CSS概述 CSS是Cascading Style Sheets的简称,中文称为层叠式样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 学CSS后我们需要掌握的技能: 1. ...
- 前端 CSS 继承性和层叠性
CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important
- {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性 定位(position)z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
- CSS的优先级和继承问题
CSS的优先级和继承问题 ★CSS的冲突,即优先级 CSS本身的设置可以同时应用多个样式在同一个元素,此时样式之间可能出现冲突而达不到用户所想要的效果. ★解决CSS冲突的优先级规则: ● CSS层叠 ...
- css优先级计算规则
原文:css优先级计算规则 最近面试了一些求职者,我问css优先级计算规则是怎样的?答曰ID优先级>class>元素选择器,外联样式优先级低于内联样式,内联样式优先级低于行间样式,然后就没 ...
- WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
随机推荐
- RTT之AT命令组件
包含客户端和服务器:用于GPRS和3G的通讯命令格式.四种基本功能 测试功能:AT+<x>=? 用于查询命令参数格式及取值范围: 查询功能:AT+<x>? 用于返回命令参数当前 ...
- 3d Max 2014安装失败怎样卸载3dsmax?错误提示某些产品无法安装
AUTODESK系列软件着实令人头疼,安装失败之后不能完全卸载!!!(比如maya,cad,3dsmax等).有时手动删除注册表重装之后还是会出现各种问题,每个版本的C++Runtime和.NET f ...
- UGUI RectTransform 矩形变换
UGUI游戏对象基本都有这个组件. float radius; radius = GetComponent<RectTransform>().sizeDelta.x; radius = ( ...
- Java基础04-数据的输入
1.为什么要有数据的输入? 实现人机进行交互 2.什么是数据的输入? 利用扫描仪Scanner进行数据输入 3.怎么使用扫描仪Scanner? (1)放在类声明之前,引入扫描仪 import java ...
- [转]AngularJS 使用 UI Router 实现表单向导
本文转自:http://www.oschina.net/translate/angularjs-multi-step-form-using-ui-router 今天我们将使用AngularJs和伟大的 ...
- (转)Shell脚本之break,continue,和exit区别
Linux脚本中的break continue exit return break结束并退出循环 continue在循环中不执行continue下面的代码,转而进入下一轮循环 exit退出脚本,常带一 ...
- 01-取消文件与svn服务器的关联
有的时候一个和svn服务器关联的文件,svn的链接已经失效,但是文件还是显示和svn关联的状态. 下面主要是解决怎么取消一个文件和svn服务器的关联. 1 新建一个文本文件 在任意目录下新建一个文本文 ...
- Functional language(函数式编程语言)初步了解
对于函数式语言并不太了解,查询了百度.博客.知乎等做了以下总结. What 函数式语言(functional language)一类程序设计语言,是一种非冯·诺伊曼式的程序设计语言.函数式语言主要成分 ...
- 《Head First 设计模式》之状态模式——糖果机
状态模式(State) ——允许对象在内部状态时改变它的行为,对象看起来好像修改了它的类. 策略模式与状态模式的区别 状态主体(拥有者)持有状态对象,运行时可以通过动态指定状态对象来改变类的行为 策略 ...
- 粗看ES6之JSON
标签: es6 ES6新增JSON特性不是特别多,只是针对JSON某些情况下的写法上有一些优化: 当key值和value值对应变量名相同时 json对像中的方法书写 示例代码如下: <!DOCT ...