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.继承来的，描述的一样近，权重一样，后来者居上
原文地址：https://www.cnblogs.com/LearningOnline/p/9085030.html
时间： 2024-10-10 06:46:10