CSS长度单位及优先级

长度单位

• 绝对长度
  cm 厘米
  mm 毫米
  in 英寸

• 相对长度
  px 像素
  % 百分比 相对于父级
  em 倍数

1in = 2.54cm = 25.4mm = 96px

优先级

• 优先级: 权重越高的,优先级越高. 权重越低, 优先级越低.
  权重相同时, 谁离标签越近, 优先级越高 (就近原则)
• 权重值:
  标签: 1
  class: 10
  id: 100
  最高权重: !important 没有指定值, 写法: 写在属性值的后面
• 权重可以叠加
• 继承性:
  大多数的属性都可以继承
  小部分的属性是无法继承
  例如:
  a标签的颜色无法继承
  h标签的大小无法继承
  …

<style>
        /* 权重不同时 */
        #boy{color: blue;}    /* 权重: 100 */
        .girl{color:orange;}  /* 权重: 10 */
        /* 最高权重 */
        p{color: skyblue !important;} /* 权重: 已有的最大权重+1 */
        /* 权重相同时 */
        p{color: red; }        /* 权重: 1 */
        p{color: green;}       /* 权重: 1 */
        /* 权重叠加 */
        ul .list b i u span{color: blue;}  /* span的权重: 1+10+1+1+1+1 = 15*/
        ul li b i u span{color: red;}  /* span的权重: 1+1+1+1+1+1 = 6 */
        .list span{color: pink !important;} /* 最高权重+11 */
        ul span{color: orange !important;} /* 最高权重+2 */
        span{color: green !important;}  /* 最高权重+1 */ 
        /* 易错点 */
        b,i{ color: red; }  /* b的权重: 1   i的权重:1  不会叠加*/
        ul{color:red; font-size: 30px;}
        a{ color: blue; }
        h1{ font-size: 30px; }
</style>

<p>The most utterly lost of all days is that in which you have not once laughted.</p>
     <p class="girl" id="boy">The most utterly lost of all days is that in which you have not once laughted.</p>
     <ul><li class="list"><b><i><u><span>老母鸡</span></u></i></b></li></ul>
     <b style="color: pink;">奶昔</b>
     <i>抹茶</i>
     <hr>
     <ul>
         <li>
             <u>咖啡</u>
             <h1>奶茶</h1>
         </li>
     </ul>
     <ul>
         <li>
             <a href="">染料</a>
             <h1>木材</h1>
         </li>
     </ul>