关于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中的继承、层叠、样式优先级机制
一.继承与层叠:
随机推荐
- BGA256芯片植球全过程体验（原创）
今天工具到位,迫不亟待,需要对手上的BGA256的FPGA芯片进行植球, 该芯片买来的时候是有球的,只是在焊接后,由于电路板故障或焊接问题,需要拆下来芯片,导致球损失,需要重新植球. 一般植球都是将所 ...
- Java实现数列的排列组合
定义: 排列:从给定个数的元素中取出指定个数的元素,进行排序 组合:从给定个数的元素中仅取出指定个数的元素,不考虑排序 公式: 从n个元素中取出m个元素进行排序的个数: A(m,n)=n(n-1)(n ...
- 回归损失函数2 ： HUber loss,Log Cosh Loss,以及 Quantile Loss
均方误差(Mean Square Error,MSE)和平均绝对误差(Mean Absolute Error,MAE) 是回归中最常用的两个损失函数,但是其各有优缺点.为了避免MAE和MSE各自的优缺 ...
- 牛客练习赛31A 地、颜色、魔法（搜索+二维数组一维表示）
红色来源于山脉,象征着狂躁.愤怒.混乱,血雨腥风,电光火石. 蓝色来源于海岛,象征着控制.幻觉.诡计,运筹帷幄,谋定后动. 绿色来源于树林,象征着生命.蛮力.成长,横冲直撞,生生不息. 黑色来源于沼泽 ...
- python基础实战之猜年龄游戏
目录 一.Python基础实战之猜年龄游戏 给定年龄,用户可以猜三次年龄 年龄猜对,让用户选择两次奖励 用户选择两次奖励后可以退出 age = 18 # 答案 count = 0 # 游戏次数控制 p ...
- 《Java知识应用》Java-线程池（ScheduledExecutorService）
先回顾一下,Runnable 的使用方法. package demo.knowledgepoints.scheduledtask.run; /*** * 线程类 */public class Thre ...
- [ASP.NET Core 3框架揭秘] 配置[5]：配置数据与数据源的实时同步
在<配置模型总体设计>介绍配置模型核心对象的时候,我们刻意回避了与配置同步相关的API,现在我们利用一个独立文章来专门讨论这个话题.配置的同步涉及到两个方面:第一,对原始的配置源实施监控并 ...
- Docker+DokcerFile 简单命令和简单镜像配置----Tomcat+jdk+centos7
宿主机描述:docker info (自身的描述)docker --helpdocker images(查看所有镜像)docker images -adocker images -q(显示镜像ID)d ...
- php使用微信登录
1.第一步 $hosturl = urlencode('');//异步回调地址 $wechatInfo = WechatInfo::get_wechat(); //查询appid $url = &qu ...
- CSS类的操作
CSS类的操作 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <t ...