CSS继承和层叠性
CSS继承和层叠性
继承性
- 关于文字样式的属性，都具有继承性。这些属性包括：color、text-开头、line-开头、font-开头。
- 关于盒子、定位、布局的属性，都不能继承。
层叠性
计算权重：
**层叠性：**就是css处理冲突的能力，所有的权重计算，没有任何兼容问题。
当多个选择器，选择了同一个元素时，就会按照顺序统计权重：
- id选择器
- 类选择器、属性选择器、伪类选择器
- 标签选择器、伪元素选择器
选择器的优先级： ID选择器 > 类选择器 > 标签选择器
计算权重
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YXfl2VsY-1603638990834)(/Users/wb/Library/Application Support/typora-user-images/image-20201023101404977.png)]
注意：（255个标签，等于一个类名），实际使用中基本用不上。
权重相同
权重相同时，根据就近原则显示样式
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V1HKDfwj-1603638990836)(/Users/wb/Library/Application Support/typora-user-images/image-20201023101720479.png)]
权重实际使用例子：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D6feusQj-1603638990838)(/Users/wb/Library/Application Support/typora-user-images/image-20201023102856604.png)]
上面的例子中，为了防止权重不够，比较稳妥的做法是：把第二个样式表照着第一个样式表来写，在此基础上，给第二个样式表再加一个权重
继承性造成的影响
注意：
- 如果不能直接选中某个元素，荣国继承性影响的话，那么权重是0。
层叠性（总结）
层叠性：层叠性是处理冲突的能力。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-N4kpLfSS-1603638990840)(/Users/wb/Library/Application Support/typora-user-images/image-20201023103428662.png)]
总结：
- 选择上了，数权重，（id选择器的数量，类选择器的数量，标签选择器的数量）。如果权重一样，谁在最后。就按照最后的使用。
- 没有选择上，通过继承影响的，使用就近原则，谁描述的近，比如选择器权重，如果权重再一样重，谁在后面使用谁。
CSS样式表的冲突的总结
- 1、对于相同的选择器（比如同样都是类选择器），其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
- 2、对于相同类型的样式表（比如同样都是内部样式表），其选择器排序：ID选择器 > 类选择器 > 标签选择器
- 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器
总结：就近原则。ID选择器优先级最大。
如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器）
!important标记：优先级最高
important在英语里面的意思是“重要”的意思
语法:
k:v !important;
font-size:60px !important;
注意（!important标记需要强调）：
- !important提升的是一个属性，而不是一个选择器
- !important无法提升继承的权重，权重原来是多少就是多少，不会改变。
- !important不影响就近原则
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-94MftPHH-1603638990841)(/Users/wb/Library/Application Support/typora-user-images/image-20201023110903548.png)]
知识回顾
CSS属性
font-weight:bold;//加粗
font-style:italic;//倾斜
text-decoration:underline;//下划线
background-color:red;//背景颜色
color:red;//前景颜色
class和id的区别
class用于css，id用于js。
- class页面上可以重复使用；id在页面上是唯一的，不能重复使用
- 一个标签可以有多个class，用空格隔开；id只能一个
各种选择器(浏览器兼容性)
IE6层面兼容的选择器： 标签选择器、id选择器、类选择器、后代、交集选择器、并集选择器、通配符。如下：
p
#box
.spec
div p
div.spec
div,p
*
IE7能够兼容的：儿子选择器、下一个兄弟选择器。如下：
div>p
h3+p
IE8能够兼容的：
ul li:first-child
ul li:last-child