前端css优先级以及继承
2024-10-21 04:17:43
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.继承来的,描述的一样近,权重一样,后来者居上
最新文章
- JDBC判断数据库是否插入成功
- storm学习好文链接
- paper 132:图像去噪算法:NL-Means和BM3D
- sharedpreferences的简单使用
- linux下对date和timestamp的互转
- js添加广告模块,随页面移动而移动
- 洛谷P3373 【模板】线段树 2
- 每天一个脚本解析day1==》《service xxxxx status》之service脚本解析
- myeclipse高版本对应tomcat低版本解决办法
- PMO究竟啥样?(3)
- 谈谈 JavaScript 中的 this 指向问题
- 20+ Rsync command’s switches and common usages with examples – Unix/Linux--reference
- 关闭 Flash 沙箱安全模式,解决浏览器高占用
- Delphi TcxTreeListColumn 的 ImageComboBox 用法
- 关于使用STL常见的两个bug
- 高质量程序设计指南C/C++语言——malloc/free使用要点
- QT5.6 编译SQLServer驱动
- ImportError: No module named _tkinter, please install the python-tk package ubuntu运行tkinter错误
- day040 数据库索引补充 存储过程 事务等
- 【Ray Tracing in One Weekend 超详解】 光线追踪1-9 景深
热门文章
- leetcode 627. Swap Salary 数据库带判断的更新操作
- C# List(T).Reverse 方法 顺序反转
- 案例53-crm练习修改客户功能实现
- Python实现抓取CSDN热门文章列表
- 语文,数学,ps
- 让GIt忽略SSL证书错误的方法
- golang and mogodb
- [Java][Servlet] Cannot call sendRedirect() after the response has been committed
- Docker 清理命令汇总
- SpringCloud的学习记录(4)