关于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中的继承、层叠、样式优先级机制
一.继承与层叠:
随机推荐
- Selenium之勾选框操作
勾选框操作: 所谓勾选框,意思是可以勾选一个及以上或全部勾选.勾选框的图标一般都是方形的. 复选框勾选一般分为三种情况: ①勾选单个框,我们直接用元素定位的方式定位到点击即可. ②勾选多个 ...
- 从RTL视图到Verilog语言-转可乐豆原创
从RTL视图到Verilog语言 曾经听过某位大牛都说:“当你的学习FPGA到一个境界的时候,你看到的硬件描述语言,将不再是单纯的语言,而是由一个个逻辑门组成的电路图,一旦达到这个境界,方能把代码写到 ...
- python为前端提供API
作为一名前端来学习后端语言,有难度啊.这里把第一次尝试的过程做个记录 1.网上看到Python给前端提供API可以使用python的flaskweb框架 #py文件 import json from ...
- 更新Preloader与uboot
1.用bsp-editor 产生Preloader 参考https://rocketboards.org/foswiki/Documentation/AVGSRD160Preloader 根据QSYS ...
- ngxtop（nginx实时监控工具）
原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接:https://app.yinxiang.com/shard/s17/nl/19391737/dea1ca3a-7 ...
- LeetCode刷题总结-栈、链表、堆和队列篇
本文介绍LeetCode上有关栈.链表.堆和队列相关的算法题的考点,推荐刷题20道.具体考点分类如下图: 一.栈 1.数学问题 题号:85. 最大矩形,难度困难 题号:224. 基本计算器,难度困难 ...
- SpringCloud分布式配置中心
一.什么是配置中心 在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,有分布式配置中心组件spring cloud c ...
- Centos6.5 Intel X722 编译安装网卡驱动
1,编译环境准备,安装好kernel-devl ,kenel-headers等; 注意: 一定要注意kernel 的内核,一定要保持被安装的机器与编译的内核保持一致; 下载驱动地址:https://d ...
- Docker常用命令-全
原文内容来自于LZ(楼主)的印象笔记,如出现排版异常或图片丢失等问题,可查看当前链接: https://app.yinxiang.com/shard/s17/nl/19391737/9f6bf39e- ...
- AOP框架Dora.Interception 3.0 [3]: 拦截器设计
对于所有的AOP框架来说,多个拦截器最终会应用到某个方法上.这些拦截器按照指定的顺序构成一个管道,管道的另一端就是针对目标方法的调用.从设计角度来将,拦截器和中间件本质是一样的,那么我们可以按照类似的 ...