前端面试 CSS三大特性
2024-09-07 20:43:35
CSS的三大特性
1.层叠性
代码由上向下执行，相同选择器设置到同一元素上，样式冲突的，会执行比较靠近html的样式，样式不冲突的情况下不影响
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box {
margin: 0 auto;
height: 200px;
width: 200px;
background-color: black;
}
.box1 {
background-color: red;
width: 100px;
height: 100px;
}
.box1 {
background-color: pink;
}
</style>
<div id="box">
<div class="box1">11</div>
</div> </body>
</html>
2.继承性
CSS具有继承父类元素的特性，如 字体大小，颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box {
margin: 0 auto;
height: 200px;
font-size: 30px;
}
.box1 { width: 100px;
height: 100px;
}
</style>
<div id="box">
<div class="box1">继承性</div>
</div> </body>
</html>
3.优先级
- 继承样式的权重为0 ，
- 行内样式，style属性的元素，行内样式权限非常高
- !important命令，拥有最大的优先级
|
Div ul li |
0,0,0,3 |
|
.nav ul li |
0,0,1,2 |
|
a:hover |
0,0,1,1 (伪类) |
|
.nav a |
0,0,1,1 |
|
#nav p |
0,1,0,1 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box {
margin: 0 auto;
height: 200px;
font-size: 30px;
color: #ffbbff !important;
}
.box1 {
width: 100px;
height: 100px;
color: red;
}
</style>
<div id="box">
<div class="box1">优先级</div>
</div> </body>
</html>
最新文章
- 开源一款简单清爽的日历组件，JavaScript版的
- Linux内核笔记--内存管理之用户态进程内存分配
- lecture15-自动编码器、语义哈希、图像检索
- Bootstrap学习------Tabel
- jzoj[1438]NOIP2013火柴排队
- xp/2003开关3389指令
- IE 文档模型设置 免去你IE 按F12去调文档标准的烦恼。
- CentOS7修改SSH远程连接端口
- from sys import argv
- echarts之折线图配置（附带图例很多做成分页效果）
- vue 使用a+ router.push的形式跳转时，地址栏不显示参数
- .NetCore利用Swagger生成 XML文档需要注意生成路径的地址
- JDBC事务提交/回滚实例
- Linux ab 命令
- iOS “弱账号” 暗转 “强账号”
- BZOJ5343 & 洛谷4602 & LOJ2555：[CTSC2018]混合果汁——题解
- GYM 101875 2018 USP-ICMC
- Anaconda 介绍及安装
- RTSP安防摄像机（海康大华宇视等）如何推送到RTMP流媒体服务器进行直播
- Netbeans 中部署运行Webservice出错