大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺
三. 层叠和继承
- 继承
父元素拥有了某个css属性,子元素不需要任何条件的情况下都会拥有父元素的属性。
并不是所有的css属性都能继承,可以被继承的css属性有以下:
color text- line- font- -->都是跟文字属性相关。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.d1 {
color: red;
}
.d1 span {
font-size: 100px;
}
</style>
</head>
<body>
<div class="d1">
<!-- span继承了div.d1的color属性 -->
<span>Hello,span</span>
</div>
</body>
</html>
其它的关于盒子、定位、布局的属性不能被继承。
- 层叠
是css处理冲突的一种解决方案。需要通过计算权重 来解决层叠的问题。
计算权重的第一步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*计算权重第一步比较id class html 选择器的数量*/
#d1 .d2 p {
color: red;
}
/*1 1 1*/
div div #d3 p {
color: green;
}
/*1 0 3*/
div.d1 div.d2 div.d3 p {
color: blue;
}
/*0 */
</style>
</head>
<body>
<div class="d1" id="d1">
<div class="d2" id="d2">
<div class="d3" id="d3">
<p>div-div-div-p</p>
</div>
</div>
</div>
</body>
</html>
结果:
计算权重的第二步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*计算权重第二步,如果权重一样,那么后出现的会覆盖掉先出现的*/
#d1 #d2 p {
color: red;
}
#d2 #d3 p {
color: blue;
}
</style>
</head>
<body>
<div class="d1" id="d1">
<div class="d2" id="d2">
<div class="d3" id="d3">
<p>div-div-div-p</p>
</div>
</div>
</div>
</body>
</html>
结果:
计算权重第三步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*比较权重第三步:看选择器是否直接选中目标元素,如果没有选中目标元素,那么他们的权重为0*/
#d1 #d2 #d3 {
color: red;
}
div.d1 div.d2 div.d3 {
color: blue;
}
p {
color: green;
}
</style>
</head>
<body>
<div class="d1" id="d1">
<div class="d2" id="d2">
<div class="d3" id="d3">
<p>div-div-div-p</p>
</div>
</div>
</div>
</body>
</html>
结果:
计算权重第四步
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/*计算权重第四步:如果都没有选中,那么谁离目标元素近就听谁的*/
#d2 #d3 {
color: red;
}
#d1 #d2 {
color: blue;
}
</style>
</head>
<body>
<div class="d1" id="d1">
<div class="d2" id="d2">
<div class="d3" id="d3">
<p>div-div-div-p</p>
</div>
</div>
</div>
</body>
</html>
结果:
总结
- 先看有没有选中目标元素,如果选中,比较权重,谁的权重大听谁的。如果权重一样,谁写在后面听谁的。
- 如果没有选中目标元素,那么权重为0,如果所有的权重都为0,就近原则,谁离目标元素近听谁的。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/168008.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...