如何設置優先順序

一、CSS選擇器優先順序

CSS選擇器優先順序是決定哪個規則會被瀏覽器應用的重要因素。一個選擇器的選擇器優先順序由選擇器中每個組成部分的「權重」值來判定，數值範圍為0~65535。權重值的計算方法如下：

- 每個ID選擇器：權重值為100，最多為1個
- 每個類或屬性選擇器：權重值為10
- 每個元素選擇器或偽元素：權重值為1
- 通配符、組合符或關係符，沒有權重值

舉個例子：

/* 權重值為0,0,1,1 */
p a {...}

/* 權重值為0,1,1 */
div .class a {...}

/* 權重值為0,2,0 */
#id div {...}

/* 權重值為1,0,1 */
div {...}

如果兩個選擇器的權重值相等，則後面的規則會覆蓋前面的規則。

二、!important規則

!important是CSS提供的一種用於覆蓋其他樣式的機制。如果一個樣式規則使用了!important聲明，那麼它將會覆蓋其他所有的規則。

比如：

div {
    color: red !important;
}

div {
    color: blue;
}

無論div在哪個位置，它們的文本顏色都將是紅色。

三、嵌套選擇器

嵌套選擇器可以讓我們更方便地編寫樣式規則，並且可以通過縮進來表示嵌套層級。

.parent {
  color: red;
  .child {
    font-size: 12px;
    &:hover {
      color: blue;
    }
  }
}

嵌套選擇器中的&符號代表父級選擇器。上述代碼生成的樣式規則為：

.parent {
  color: red;
}
.parent .child {
  font-size: 12px;
}
.parent .child:hover {
  color: blue;
}

四、屬性值權重

屬性值的權重與出現位置有關。通常情況下，後面的規則會覆蓋前面的規則，比如：

div {
    color: red;
}

div {
    color: blue;
}

默認情況下，文本顏色會是藍色。

但是，在某些情況下，我們需要讓某個屬性的權重更高。例如使用了important，或者使用了讓屬性出現在後面的hack方式。

五、JavaScript操作樣式

除了CSS規則之外，我們還可以使用JavaScript來動態修改元素的樣式。

// 獲取元素
var element = document.getElementById('my-element');

// 修改樣式
element.style.backgroundColor = 'red';
element.style.color = 'white';

使用樣式屬性時，應該使用駝峰式命名規則。例如，”background-color”應該寫成”backgroundColor”。

六、總結

設置樣式的優先順序可以通過CSS選擇器優先順序、!important規則、嵌套選擇器、屬性值權重和JavaScript操作樣式實現。在實際開發中，我們需要靈活運用這些規則，並結合具體需求進行調整。