# 關於 css 權重
###### tags: `21 天 Bootstrap 5 新手實戰營`,`css`,`css權重`

權重
* animation>!important>inline>id>class>*>繼承

### 第一題
請問以下的span是什麼顏色？

  <div>Lorem ipsum, <span>dxwdxsdcsdkcj</span>dolor sit amet consectetur adipisicing elit. Ipsa, adipisci.
  </div>

<!--  CSS -->
div {
color:red;
}

### 第二題
請問以下的span是什麼顏色？

  <div>Lorem ipsum, <span>dxwdxsdcsdkcj</span>dolor sit amet consectetur adipisicing elit. Ipsa, adipisci.
  </div>

<!--  CSS -->
div {
color:red;
}
div {
color:blue;
}

### 第三題
請問以下的span是什麼顏色？

  <div>Lorem ipsum, <span>dxwdxsdcsdkcj</span>dolor sit amet consectetur adipisicing elit. Ipsa, adipisci.
  </div>

<!--  CSS -->
*{
color:yellow;
}
div{
color:red;
}
div {
color:blue;
}

### 第四題
請問以下的span是什麼顏色？

  <div>Lorem ipsum, <span>dxwdxsdcsdkcj</span>dolor sit amet consectetur adipisicing elit. Ipsa, adipisci.
  </div>

<!--  CSS -->
*{
color:yellow;
}
div{
color:red;
}
div {
color:blue;
}
div > * {
color:green;
}

### 第五題
請問以下的span是什麼顏色？

  <div>Lorem ipsum, <span>dxwdxsdcsdkcj</span>dolor sit amet consectetur adipisicing elit. Ipsa, adipisci.
  </div>

<!--  CSS -->
span {
color:pink;
}
*{
color:yellow;
}
div{
color:red;
}
div {
color:blue;
}
div > * {
color:green;
}

### 第六題
請問以下的child是什麼顏色？

 <div class="papa">papa
    <div class="child">child</div>
  </div>

<!--  CSS -->
.child {
   color:pink;
 }
 .papa {
   color:red;
 }

### 第七題
請問以下的child是什麼顏色？

 <div class="papa">papa
    <div class="child">child</div>
  </div>

<!--  CSS -->
.child {
   color:pink;
 }
 .papa {
   color:red;
 }
 .papa > * {
 color:green;
 }

### 第八題
請問以下的child是什麼顏色？

 <div class="papa">papa
    <div class="child">child</div>
  </div>

<!--  CSS -->
.child {
   color:pink;
 }
 .papa {
   color:red;
 }
 .papa > * {
 color:green;
 }
 .papa * {
 color:blue;
 }

### 第九題
請問以下的div區塊aaaa是什麼顏色？

 <div class="aa bb">aaaa</div>

<!--  CSS -->
    .aa.bb {
      color: red;
    }
    .aa:first-child{
      color: blue;
    }
   

<!-- ### answer
1.red
2.blue
3.yellow
4.green
5.green
6.pink
7.green
8.blue
9.blue -->

**其他注意
1 flex-basis屬性會蓋掉width或height
2 先看權重，在看順序。
3 屬性優先權和class一樣。

**偽類順序
a{}
a:visited{}
a:focus{}
a:hhover{}
a:actived{}