前端——css继承性，层叠性
程序员文章站
2022-06-04 14:41:24
...
继承性
<!-- 继承：给父级设置一些属性，子级继承了父级的该属性，这就是css中的继承
有一些属性是可以继承下来， ： color 、 font-*、 text-*、line-* 文本元素
background不能继承
像一些盒子元素，定位的元素（浮动，绝对定位，固定定位）不能继承
-->
<style type="text/css">
.father{
font-size: 30px;
background-color: green;
}
.child{
color: purple;
}
</style>
</head>
<body>
<div class="father" id="egon">
<div class="child">
<p>xiaoming</p>
</div>
</div>
<p>xiaohong</p>
</body>
层叠性
层叠性： 权重的标签覆盖掉了权重小的标签，
权重 id的数量 class的数量 标签的数量
按顺序位数比较，第一位比较出来就不会比了
<title>层叠性</title>
<style type="text/css">
/*1 0 0 最后的显示色*/
#box{
color: red;
}
/*0 1 0*/
.container{
color: yellow;
}
/*0 0 1*/
p{
color: purple;
}
</style>
</head>
<body>
<p id="box" class="container">
猜猜我是什么颜色
</p>
</body>
<style type="text/css">
/*2 0 1*/
#box1 #box2 p{
color: yellow;
}
/*1 1 1*/
#box2 .wrap3 p{
color: red;
}
/*1 0 3*/
div div #box3 p{
color: purple;
}
/*0 3 4*/
div.wrap1 div.wrap2 div.wrap3 p{
color: blue;
}
</style>
</head>
<body>
<div id='box1' class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再来猜猜我是什么颜色？</p>
注意
上图的示例都选中到了目标元素，都到了p那一行
<div id='box1' class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>再来猜猜我是什么颜色？</p>
</div>
</div>
</div>
当权重一样的时候 以 后设置的属性为准
/*1 1 1 */
#box2 .wrap3 p{
color: yellow;
}
/*1 1 1 以此为准*/
#box1 .wrap2 p{
color: red;
}
上图的示例都选中到了目标元素，都到了p那一行，没有到p,继承来的属性 权重为0
没有到p,继承来的属性 权重为0
#box1 #box2 .wrap3{
color: red;
}
/*选中到p,来的 显示绿色*/
/*1 1 1*/
#box2 .wrap3 p{
color: green;
}
如果属性都是被继承下来的 权重都是0 。权重都是0:“就近原则” ： 谁描述的近，就显示谁的属性，描述的一样近就重新比权重
#box1 #box2{
color: red;
}
/*以此为准 蓝色*/
.wrap1 #box2 .wrap3{
color: blue;
}
属性都是被继承下来的 权重都是0，描述的一样近就重新比权重，权重一样以后来为准。显示红色。
#box1 #box2 .wrap3{
color: red;
}
.wrap1 #box2 .wrap3{
color: blue;
}
！important:设置权重为无限大
不影响继承来的权重，只影响选中的元素
目标块：
<div>
<p class="spe1 spe2">我是什么颜色</p>
<p class="spe2 spe1">我是什么颜色</p>
</div>
查看：
红色
<style type="text/css">
p{
color: red ;
font-size: 30px;
}
黄色
<style type="text/css">
p{
color: red ;
font-size: 30px;
}
.spe1{
color: yellow ;
font-size: 40px;
}
绿色
<style type="text/css">
p{
color: red ;
font-size: 30px;
}
.spe1{
color: yellow ;
font-size: 40px;
}
.spe2{
color: green;
font-size: 40px;
}
红色
<style type="text/css">
p{
color: red !important ;
font-size: 30px;
}
.spe1{
color: yellow ;
font-size: 40px;
}
.spe2{
color: green;
font-size: 40px;
}
目标块：
<div class="list">
<ul>
<li>
我是一个li标签
</li>
</ul>
</div>
查看：
红色
ul{
color: red;
}
.list{
color: purple;
}
红色
ul{
color: red;
}
.list{
color: purple !important;
}
总结
在style里设置样式，
1、比较的双方都选中到目标元素，则需要比较权重，权重按 id选择器，类选择器，标签选择器顺序比较大小，
2、如果都没有选中到目标元素，则描述到目标元素最近的样式为准，如果描述位置一样近按 上述 1、比较权重
3、选中到目标元素样式会覆盖没有选中到目标元素的样式
4、！important:设置权重不建议使用，如果没有选中到目标元素的样式添加没有影响。