css的继承性和层叠性
css有两大特性：继承性和层叠性
继承性：
面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。
继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承
层叠性
层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
权重： 谁的权重大，浏览器就会显示谁的属性
谁的权重大？ 非常简单就是小学的数数。
数：id的数量 class的数量 标签的数量，顺序不能乱
优先级等级
行内样式 > ID选择器 > 类选择器 > 标签选择器
标签选择器 优先级为1
类选择器 优先级为10
ID选择器 优先级为100
行内样式 优先级为1000
大家记住这个这个层叠行就好理解了
层叠性： 权重的标签覆盖掉了权重小的标签，说白了 ，就是被干掉了
权重： 谁的权重大，浏览器就会显示谁的属性
谁的权重大？ 非常简单就是小学的数数。
数：id的数量 class的数量 标签的数量，顺序不能乱
数：id的数量 class的数量 标签的数量，顺序不能乱
head>
<meta charset="UTF-8">
<title>层叠</title>
<style>
/*这个时候就是看你的id 和class的优先级了*/
/*1 0 0 */显示红色
#box{
color:red;
}
/*0 1 0*/
.container{
color:green;
}
/*0 0 1*/
p{
color:peru;
}
</style>
</head>
<body>
<p id="box" class="container">老王在哪里</p>
</body>
上面的效果就是显示红色的 因为id的权重大于class和标签选择器
eg:
#box{ color: red; } .con{ color: yellow; } p{ color: peru; } <p id="box" class="con">老王在哪里</p>
显示效果就是id修饰的红色
是不是感觉明白了呢？好的，再给大家加深点难度。
<head> <meta charset="UTF-8"> <title>层叠</title> <style> #box1 #box2{ color:yellow; } box2 .wrap3 p{ color:red; } div div #box3 p{ /*这个是直接对id 中的p指定的颜色所以就是这个 */ color:purple; } 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> </div> </div> </div> </body> 第二种： <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>
我们还是要看权重的 就是看看哪个的权重更高：
权重一样的是可以付覆盖的，后来者居上
<head> <meta charset="UTF-8"> <title>权重</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>
1.先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性
3.继承来的，描述的一样近，数权重
4.继承来的，描述的一样近，权重一样，后来者居上
被继承来的是没有权重的 所以后来的可以覆盖继承来的
<head> <meta charset="UTF-8"> <title>权重</title> <style> #box1 #box2 .wrap3{ /*继承wrap3的颜色*/ color:red; } #box1 .wrap3 p{ color:green; } </style> </head> <body> <!--如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性--> <div id="box1" class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来看看我</p> </div> </div> </div> </body>
小总结一下：
总结：
1.先看标签元素有没有被选中，如果选中了，就数数 （id,class,标签的数量） 谁的权重大 就显示谁的属性。权重一样大，后来者居上
2.如果没有被选中标签元素，权重为0。
如果属性都是被继承下来的 权重都是0 。权重都是0:"就近原则" ： 谁描述的近，就显示谁的属性
