关于css里决定样式优先级的权重
最近学css样式，优先级有点繁琐，简单记录一下。
css中的优先级规则为：
- 有！important的最优先；
- 其次权重高的优先；
- 权重相同则后定义优先，会覆盖前面的。
至于权重：
- #id 为100；
- class类或伪类、属性选择器为10；
- 标签选择器为1
- 内联样式style= 为1000。
所以有上图的权重值。
至于继承，谁在body中更靠近p标签就用谁，若靠近程度一样，则继续用权重比较。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权重</title>
<style>
#box1 .b p{
color: green;}
#box1 .b .c p{
color: red;}
#lyf p{
color: yellow;}
#box2 #box3 p{
color: darkblue;}
p{
color: darkorange !important;} #box2{
color: #123;}
#box1{
color: #789;}
</style>
</head>
<body>
<div id="box1" class="a">
<div id="box2" class="b">
<div id="box3" class="c">
<p id="lyf" class="d" >刘亦菲</p>
</div>
</div>
</div>
</body>
</html>
关于css里决定样式优先级的权重的更多相关文章
- css样式优先级和权重问题
内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...
- CSS样式优先级和权重问题（部分）
内联样式: <div style="font-size: 12px;">姓名</div> 外部样式: <link rel="styleshe ...
- css调试与样式优先级
如何查看一个标签的当前css样式 如上图所示 先用标签选择器选择某个标签 然后在elements区域就会自动找到该标签 然后在右侧的styles区域整个区域都是该标签的样式,从上到下是显示的优先级,被 ...
- 前端学习笔记——引入css文件、样式优先级
CSS样式的引用方式有三种:行间样式表>内部样式表>外部样式表. 如果只有一种样式,那么优先级“由内到外 由近到远” 1.行间样式表--内联方式 内联方式指的是直接在 HTML 标签中的 ...
- css学习之样式层级和权重
第一种情况 当选择器相同的情况下,引入方式的前后,决定页面最后的效果 ---------外部在最后面显示 ---------内部在最后面显示 第二种情况 引入方式相同时候,则是按照权重取最大(取权重最 ...
- CSS - 权重，样式优先级
关于CSS权重,一套计算公式来去计算,就是 CSS Specificity,我们称为CSS 特性或称非凡性,它是一个衡量CSS值优先级的一个标准. 遇到样式应用问题,计算一下权重就知道优先级. 具体规 ...
- css样式权重优先级，css样式优先级
原文:http://www.bkjia.com/Javascri... 样式选择器权重优先级: important > 内嵌样式 > ID > 类 > 标签 | 伪类 | 属性 ...
- CSS权重及样式优先级问题
CSS权重值计算 一条样式规则的整体权重值包含四个独立的部分:[A, B, C, D]; (1) A 表示内联样式(写在标签的style属性中),只有 1 或者 0 两个值:对于内联样式,由于没有选择 ...
- css中的继承、层叠、样式优先级机制
一.继承与层叠:
随机推荐
- Appium之WebView自动化
WebView的测试:主要作用在混合(Hybrid)的应用 * 一部分是原生界面和代码,而另一部分是内嵌网页 * 比如微信.支付宝 * 内嵌了一个浏览器内核,由浏览器内核实现的 安卓应用中的内嵌的展示 ...
- vue2.5 + element UI el-table 导出Excel
安装依赖 npm install --save xlsx file-saver 新建excelHelper.js \src\utils\目录下新建excelHelper.js文件 import Vue ...
- layui扩展组件，下拉树多选
项目介绍 项目中需要用到下拉树多选功能,找到两个相关组件moretop-layui-select-ext和wujiawei0926-treeselect,但是moretop-layui-selec ...
- JS基础-正则
正则表达式 创建正则表达式 使用一个正则表达式字面量 const regex = /^[a-zA-Z]+[0-9]*\W?_$/gi; 调用RegExp对象的构造函数 const regex = ne ...
- 2019年JVM面试都问了什么？快看看这22道面试题！（附答案解析）
一. Java 类加载过程? Java 类加载需要经历一下 7 个过程: 1. 加载 加载是类加载的第一个过程,在这个阶段,将完成一下三件事情: • 通过一个类的全限定名获取该类的二进制流. • 将该 ...
- ssm整合——Spring配置（2）
配置Spring 1. 环境准备 使用之前搭建Mabatis的环境 1.1 新建目录 新建spring的service业务逻辑包 在resources目录下新建spring的配置文件:applicat ...
- 《Java基础知识》Java锁详解（volatile，synchronized等）
volatile: 让变量每次在使用的时候,都从主存中取. volatile具有synchronized关键字的“可见性”,但是没有synchronized关键字的“并发正确性”,也就是说不保证线程执 ...
- Maven使用教程二：nexus私服搭建及使用
nexus安装 从nexus官网 下载最新的安装包 1.打开命令行,切换到nexus-3.2.1-01/bin目录下,回车.例:C:\Nexus\nexus-3.2.1-01\bin 2.输入:nex ...
- 多线程之美2一ThreadLocal源代码分析
目录结构 1.应用场景及作用 2.结构关系 2.1.三者关系类图 2.2.ThreadLocalMap结构图 2.3. 内存引用关系 2.4.存在内存泄漏原因 3.源码分析 3.1.重要代码片段 3. ...
- Odoo系统有哪些不同版本？
来源:www.odooyun.com 1. Odoo10.0 vs Odoo11.0 vs 8.0 截至2017年底,最新的Odoo发布版为Odoo 11.0,但功能上有一定精简(去除财务模块,去除工 ...