CSS 三大特性

标签：样式   文本   权重   center   div   通配   块级元素   col   位置   

一、CSS层叠性

• 说明

  层叠性是多种CSS样式的叠加，是浏览器处理样式冲突的方式。在HTML中对于同一个元素可以有多个CSS样式存在，当有相同权重的样式存在时，会根据这些样式出现的先后顺序来决定，处于最后面的CSS样式将会覆盖前面的CSS样式。

• 举例

  下面代码，出现一个div 标签指定了相同样式不同值的情况，这就是样式冲突。

  div{
    color:red;
  }
  div{
    color:blue;
  }

• 原则

  通常出现样式冲突，会按CSS书写的顺序，以最后的样式为准。

  1. 样式不冲突，不会层叠。
  2. 样式冲突，遵循就近原则。 长江后浪推前浪，后面样式盖前面。

二、CSS继承性

• 说明

  简单的理解为—“子承父业“，是指子标签会继承父标签的==某些==样式，如文本颜色和字号。想要设置一个可继承的属性，只需将它应用于父元素即可。

• 举例

  <style>
    div{color:pink;font-size:20px;}
  </style>
  <div>
    <span>
        我是什么颜色的？
    </span>
  </div>

• 注意

  1. 合理使用继承可以简化代码，降低CSS样式的复杂性。对于字体、字号、颜色、行距等==文本类属性==具有继承性，都可以在body中统一设置，然后影响文档中所有文本。
  2. 但是，并不是所有的CSS属性都可以继承，如边框、外边距、内边距、背景、定位、元素高度等==与块级元素相关的==属性都不具有继承性。

三、CSS优先级

在复杂CSS样式表，往往并不是相同样式不同值的堆叠这么简单，经常出现两个或多个不同样式规则应用在同一元素上，这时到底采用哪个样式呢？这就是典型的CSS优先级问题。

处理优先级问题，就是考虑样式权重的高低。这里先给大家介绍一些特殊的情况：

1. ==继承样式的权重为0。==也就是说，在嵌套结构中，无论父元素样式权重多大，子元素继承时，应用在子元素上的权重都为0，即子元素定义的样式会覆盖所有继承来的样式。
2. ==行内样式优先。==应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。
3. 权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。
4. CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

CSS特殊性

• 说明

  或称非凡性，是需要用一套计算公式来去计算CSS的权重。CSS的权重是一个衡量CSS值优先级的一个标准，规则如下：

  用一个四位的数字串(CSS2是三位)来表示，更像四个级别，值从左到右，左面的最大，一级大于一级，数位之间没有进制，级别之间不可超越。

• 权重比较

• 权重的叠加

• 注意

  1. 继承的权重为 0。
  2. 数值之间没有进制计算，比如： 0,0,0,5 + 0,0,0,5 =0,0,0,10 而不是 0,0, 1, 0， 所以不会存在10个div等于一个类选择器的状况。
  3. 权重是用来计算优先级的，层叠是来表现优先级的。

• 总结优先级

  !important>行内样式> ID 选择器>类(伪元素、伪类、属性)选择器>元素选择器>通用选择器

  1. 使用了 !important声明的规则。
  2. 内嵌在 HTML 元素的 style属性里面的声明。
  3. 使用了 ID 选择器的规则。
  4. 使用了类选择器、属性选择器、伪元素和伪类选择器的规则。
  5. 使用了元素选择器的规则。
  6. 使用了通配符的规则。
  7. 同一类选择器则遵循就近原则。

CSS 三大特性

标签：样式   文本   权重   center   div   通配   块级元素   col   位置   

原文地址：https://blog.51cto.com/biying/2500377