今天想跟大家說一下有關於CSS權重的部份，不過這部分可能要先提到選取器。

那先跟大家講CSS權重好了

!important > inline style > ID > Class (類別 若有多個class權重會變大)/psuedo-class(偽類)/attribute（屬性選擇器 > Element(元素/標籤) > *(萬用)

這是我整理出來可能比較常見的選取器之間權重大小。

那什麼是選取器？

CSS選擇器是CSS規則的一部分。它能讓你選定要調整哪個（或哪些）元素的樣式。

接下來我會按照上面的由小到大去解釋各個選取器是用什麼選取方式或是代表什麼意思。

*(萬用選取器/通用選取器）

在ＣＳＳ中這個符號*代表的意思是通用選取器。這算是最大範圍ＡＯＥ了吧。

什麼是通用選取器？它可以匹配任意類型的 HTML 元素。（包括head、body)

在MDN上面還發現一個有趣的例子，他還可以跟其他選取器搭配使用

這是MDN上面的例子：

*[lang^="en"] {
  color: green;
}
*.warning {
  color: red;
}
*#maincontent {
  border: 1px solid blue;
}

目前可能各位講到這邊還看不懂*後面接著東西的意思，後面解釋完就會知道了

因為他權重最小，所以你用其他選取器就可以很容易覆蓋過去它的ＣＳＳ設定。

Element(元素/標籤選取器)

這個選取器可以針對標籤也可以說是ＨＴＭＬ元素(Element)去做選取。

假設我有一段文字：

<div>
不能下載台北採用對了電視台試題啟動體制招標下列女生權力屏東，連結宅宅意大利用戶名醫院精靈庫存環保，股份有限公司該公司手機鈴聲靈活你還溫度，天堂一下子美元隨着斗內思想，出發主任基於下載地址出租保健戰士面臨承擔文檔演唱會認定，大學美國下載地址，供應部落，公斤。
</div>

我用元素選取器去選取div這個元素，並且設定一些CSS樣式

div {
       width: 200px;
       background-color: brown;
       color: aliceblue;
}

很方便的可以選到你想要的元素，但建議小心服用畢竟這也算是一個大範圍ＡＯＥ。

使用上要注意一個不小心可能會傷及無辜改到你不想該的地方喔

畢竟一個標籤可能出現在網頁上不只一次呢

class類別選取器

接下來換類別選取器class，這個選取器是針對你所設定的class去選取要修改樣式的標籤。

這個選取器是用.加上你的類別名稱去做選取。

<div class="text">
不能下載台北採用對了電視台試題啟動體制招標下列女生權力屏東，連結宅宅意大利用戶名醫院精靈庫存環保，股份有限公司該公司手機鈴聲靈活你還溫度，天堂一下子美元隨着斗內思想，出發主任基於下載地址出租保健戰士面臨承擔文檔演唱會認定，大學美國下載地址，供應部落，公斤。
</div>  

.text {
         width: 200px;
         background-color: lightblue;
         color: blueviolet;
}

順帶一提class是可以重複的，還有一個元素可以擁有很多個class。像是這樣

<div class="text text-1">
不能下載台北採用對了電視台試題啟動體制招標下列女生權力屏東，連結宅宅意大利用戶名醫院精靈庫存環保，股份有限公司該公司手機鈴聲靈活你還溫度，天堂一下子美元隨着斗內思想，出發主任基於下載地址出租保健戰士面臨承擔文檔演唱會認定，大學美國下載地址，供應部落，公斤。
</div>
<div class="text text-2">
準備人們適用於太陽這次多年，著名指出推出從來沒紛紛去年至於服務以及禮物到處商務對外，在那裡要是最重要電子商務，原因沒人中文版，關係充滿顯得學會民族學院銷售過去會員成長一般機票確保，無法審核觀點總數狀態保護同樣外國事實上，休息執行環境運輸，研發真實，不大聯。
</div>

.text {
         width: 200px;
         background-color: lightblue;
         color: blueviolet;
         margin-bottom: 10px;
}

如果有想要共用設定可以給一個共同class名稱，如果需要個別設定在給不同的class名稱。

這邊提醒一下元素如果有兩個class名稱權重會變大。

psuedo-class(偽類)/attribute（屬性選擇器)

• psuedo-class(偽類): 這個選取器比較特別之後會再介紹，這邊可以先記得是跟class權重一樣大。

• 屬性選取器: 這個選取器是利用屬性去選取

<input type="checkbox">

我們可以利用它的屬性去選取到這個元素

[type:"checkbox"]

id選取器

你可以給每個元素設立class也可以設立id，只是兩者差別不太一樣。

在這裡要說一個淺規則，id是唯一值就像身分證字號一樣，不會存在相同的身分證字號

<div class="text text-1">
不能下載台北採用對了電視台試題啟動體制招標下列女生權力屏東，連結宅宅意大利用戶名醫院精靈庫存環保，股份有限公司該公司手機鈴聲靈活你還溫度，天堂一下子美元隨着斗內思想，出發主任基於下載地址出租保健戰士面臨承擔文檔演唱會認定，大學美國下載地址，供應部落，公斤。
</div>
<div id="onlytext" class="text text-2">
準備人們適用於太陽這次多年，著名指出推出從來沒紛紛去年至於服務以及禮物到處商務對外，在那裡要是最重要電子商務，原因沒人中文版，關係充滿顯得學會民族學院銷售過去會員成長一般機票確保，無法審核觀點總數狀態保護同樣外國事實上，休息執行環境運輸，研發真實，不大聯。
</div>

這裡有在多加一個id讓我們方便去設定。選取方式是用#

.text {
         width: 200px;
         background-color: lightblue;
         color: blueviolet;
         margin-bottom: 10px;
}

#onlytext{
           color: red;
}

這樣我就可以透過id去選取到我想要的元素後做更改。

小提醒雖然說id是唯一值，不過還是不同元素可以設定同一個id。

但強烈建議不要這樣做，這個在後續寫Javascript的時候會造成問題

inline-style

兵器譜上排名第二

這是個撰寫CSS的方式，撰寫的方式大概是這樣直接寫在HTML標籤上面。

<div style="color: #f00; width: 200px; background-color: #000">
創作都市品質教程母親理想事務如果您保健電信放下，開通對話認定多多顯卡最重要，加油網咖教授消息地方各項幹什麼，結婚收購感到並且位於，不是很理由上一頁推坑大魔王，周邊吃螺絲設定曾經趕緊親自預期內容計劃足球附近繼續，搜尋引擎前來臺灣民眾先進情緒過來其他，醫生節。
</div>

這個寫法不是不行也會有一樣的樣式效果，但是它的權重太高會導致後面維護困難除非萬不得已不建議這樣寫。

不過還有一個更絕的人物在下面

!important

注意看這個男人太狠了，它叫!important。如果你看到已經離職的同事這樣寫你一定會

示範一下:

我先用兵器譜上排名第二的寫法。

<div class="text" style="color: #f00; width: 200px; background-color: #000">
創作都市品質教程母親理想事務如果您保健電信放下，開通對話認定多多顯卡最重要，加油網咖教授消息地方各項幹什麼，結婚收購感到並且位於，不是很理由上一頁推坑大魔王，周邊吃螺絲設定曾經趕緊親自預期內容計劃足球附近繼續，搜尋引擎前來臺灣民眾先進情緒過來其他，醫生節。
</div>

接下來CSS這樣寫:

.text {
		 color: aqua !important;
}

我只能說太無情了這個男人，我用class選取器加上這個絕招就蓋的過去。

快來人阿!告訴我這個要怎麼改! 因為它的權重是最高的誰都蓋不過它了!

不過這邊提供一個辦法就是利用程式碼是一行一行讀取的特性在寫一次!important

.text {
		 color: aqua !important;
}
.text{
         color: beige !important;

所以你用了一個!important就準備用千千萬萬個!important去蓋它，準備進入!important輪迴中。

所以這是真的萬萬不得已否則千萬不要這樣寫，給你的同事留一條活路吧!

那今天對於選取器權重的介紹就到這邊啦! 順帶一提選取器是有組合技的。

網路上也有一些教學文章是用分數在算權重的，可以去參考看看。

參考文獻

Day20：小事之 CSS 權重 (css specificity)