关于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中的继承、层叠、样式优先级机制
一.继承与层叠:
随机推荐
- python学习笔记—DataFrame和Series的排序
更多大数据分析.建模等内容请关注公众号<bigdatamodeling> ################################### 排序 ################## ...
- Python必学之编译器用哪个好？你用错了吧！
学python要知道怎么用好编译器.当我们编写Python代码时,我们得到的是一个包含Python代码的以.py为扩展名的文本文件.要运行代码,就需要Python解释器去执行.py文件由于整个Pyth ...
- 怎么样才算是精通 Python？
前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:weixin_45587093 你们所说的什么要怎样数据分析.爬虫.We ...
- ef not in
//not in linq var xx=(from c in measStateDetail where !((from d in breakInstr select d.InstrCode).Co ...
- 【eclipse】Editor does not contain a main type
问题现象: eclipse运行java程序的时候弹出对话框:Editor does not contain a main type. 解决方法: 右击 src路径 → Build Path → Use ...
- 16个Spring注解，你知道的有几个？
@Controller 标识一个该类是Spring MVC controller处理器,用来创建处理http请求的对象. @RestController Spring4之后加入的注解,原来在@Co ...
- SpringBoot之【mybatisplus】代码生成器
1.概述. AutoGenerator 是 MyBatis-Plus 的代码生成器,通过 AutoGenerator 可以快速生成 Entity.Mapper.Mapper XML.Service.C ...
- Java问题记录——循环里的二次判断与状态更新
Java问题记录——循环里的二次判断与状态更新 摘要:本文主要记录了在循环操作时可能出现的问题. 问题重现 在使用循环结构时,如果使用了定时任务,或者代码会多次调用循环结构,可能会导致有些对象会被循环 ...
- Hack the 21LTR: Scene 1 VM (Boot to Root)
靶机下载链接: https://www.vulnhub.com/entry/21ltr-scene-1,3/ 主机扫描: ╰─ nmap -p1-65535 -sV -sC -A 192.168.2 ...
- EF Core 中处理 1对1 关系
最近在开发记录感想功能的时候用到了1对1的数据关系,具体情况是这样的,有这样两个1对1的类型 public class Item { public int Id { get; set; } publi ...