CSS的继承和层叠

  学习前端的第一阶段

 

• 本文重点

CSS的继承、CSS的层叠

• CSS的继承

 先是模板代码 

    <div class="main">
      <p>h1</p>
      <p>h2</p>
      <p>h3</p>
    </div>

　　　　相应的样式是

.main {
  color: red;
}

 　　我们会看到，在div.main之后的p标签内的内容都变成了红色，可是我并没有做p标签相应的样式，这是为什么呢？

　　其实，在CSS中，有一些属性，当给自己设置的时候，自己的后代都继承上了，这个就是CSS继承性。

　　继承是从自己开始，直到最末端的元素。

　　所以到底有哪些属性是可以继承的，而哪些属性又是不可继承的。

　　　　可继承的属性：关于文字样式的属性，都具有继承性。这些属性包括：color、 text-开头的、line-开头的、font-开头的。

　　　　不可继承的属性:关于盒子、定位、布局的属性，都不能继承

 

 

• CSS的层叠性

　　　　层叠性：就是css处理冲突的能力。 所有的权重计算，没有任何兼容问题！

 

　　　　所以什么是层叠性？看下面，在p标签上加上了class和id 然后在内嵌样式中，分别以id选择器，类选择器和标签选择器去设置字体的颜色

    <div class="main">
      <p class="p1" id="p1">h1</p>  // class id
      <p class="p2" id="p2">h2</p>
      <p class="p3" id="p3">h3</p>
    </div>

在不同选择器中，选中了同一标签，改变为不同的颜色。而最重是由哪个选择器起作用呢？ 
#p1 {
  color: yellow;
}
.p1 {
  color: blue;
}
p {
  color: pink;
}

 　　

　　1.实际上，是由权重决定的。所以权重是如何计算的？

　　　权重= id选择器数量: 类选择器数量 : 标签选择器数量

比如
div.main .p1 .a span{} //权重是 0：3：2    标为a

div#main .p1 .a span{} //权重是 1：2：2   标为b

#main  .p1 .a span{}//权重是 1 : 2 : 1    标为c
 
#main #p1 .a span{} //权重是 2 : 1 :1  　　标为d

 

　　　　权重的比较是由左到右，先比id选择器和类选择器的权重大小，比如 d的权重是最大的2，a的权重是最小的 0 

　　　　而在id选择器的权重一样时，就要比较后面的权重 ，比如b和c的id权重一样，但是 类选择器的权重是c比较大些为2，b为1  

 

 　　2.继承性对层叠性的影响

　　如果不能直接选中某个元素，通过继承性影响的话，那么权重是0。

　　　最后用一张图来说明

　　　　　　

 

 

 

　　CSS样式表的冲突的总结

• • 　　1、对于相同的选择器，其样式表排序：行级样式 > 内嵌样式表 > 外部样式表（就近原则）
  • 　　2、对于相同方式的样式表，其选择器排序：ID选择器 > 类选择器 > 标签选择器
  • 　　3、外部样式表的ID选择器 > 内嵌样式表的标签选择器

总结：就近原则。ID选择器优先级最大。

　　　　举例：如果都是内嵌样式表，优先级的顺序如下：（ID 选择器 > 类选择器 > 标签选择器）

　　　　　　另外还有两个冲突的情况：

• • • 　　　　1、对同一个标签，如果用到了多个相同的内嵌样式表，它的优先级：定义的CSS样式表中，谁最近，就用谁。
    • 　　　　2、对于同一个标签，如果引用了多个相同的外部样式表，它的优先级：html文件中，引用样式表的位置越近，就用谁。

 

 

　

　　!important标记

　　　　在上的层叠性问题上，若在其中一个样式内的属性加入 !important标记，此时其权重为无穷大

　　　　语法如：

　　　　　　color:red !important ;

　　　　*注：（1）!important提升的是一个属性，而不是一个选择器

　　　　　　 （2）!important无法提升继承的权重，该是0还是0

　　　　　　　(3) !important不影响就近原则