今天給大家分享一下，

如何改變預設radio和select的樣式？

分享人：Kattem

1.背景介紹

單選按鈕 && 下拉列表

以上兩種展示資料的方式分別由表單元素中的input標籤和select標籤實現，

其中input元素使用的是radio型別。

2.知識剖析

一、form元素

      form元素定義 HTML 表單,HTML 表單是一個包含表單元素的區域。

      表單元素是允許使用者在表單中輸入內容,比如：文字輸入、下拉列表、單選按鈕、複選框等等。多數情況下被用到的表單標籤是輸入標籤input。

二、radio

       先介紹一下input元素，input元素是最重要的表單元素。

       input元素在 form元素中使用，用來宣告允許使用者輸入資料的 input 控制元件。

       輸入型別是由型別屬性（type）定義的，輸入型別至少包含23種，大多數經常被用到的輸入型別如下：

       text（文字輸入）、password（密碼輸入）、submit（提交按鈕）、button（按鈕）、image（影象作為提交按鈕）以及checkbox（複選框）和今天的重點radio（單選按鈕）。

三、label

        label 標籤為 input 元素定義標註（標記）。label 元素不會向用戶呈現任何特殊效果。

        "for" 屬性可把 label 繫結到另外一個元素。只需把 "for" 屬性的值設定為相關元素的 id 屬性的值。

四、select

        select標籤用來建立下拉列表。select標籤中的 option 標籤定義了列表中的可用選項。

3.常見問題

        如何修改radio和select的預設樣式？（賊醜，有沒有？？）

需要用到的工具如下：

label標籤；

opacity屬性;

:checked 選擇器,匹配每個已被選中的 input 元素（只用於單選按鈕和複選框）。

兄弟選擇器：

1、+ 選擇器（相鄰兄弟選擇器），可選擇緊接在另一元素後的元素，且二者有相同父元素。

2、~ 選擇器，作用是查詢某一個指定元素的後面的所有兄弟結點。

4.2 修改select預設樣式

appearance 屬性，可以讓元素看上去像標準的使用者介面元素。

所有主流瀏覽器都不支援 appearance 屬性。

Firefox 支援替代的 -moz-appearance 屬性。

Safari 和 Chrome 支援替代的 -webkit-appearance 屬性。

關於權重

權重記憶口訣。從0開始，一個行內樣式+1000（就是比如標籤後+style=“xxxx”），一個id+100，一個屬性選擇器/class或者偽類+10，一個元素名，或者偽元素+1.

參考二：關於權重
 

1、什麼是CSS權重？

權重決定了你css規則怎樣被瀏覽器解析直到生效。“css權重關係到你的css規則是怎樣顯示的”。

參考閱讀【Understanding specificity】

當很多的規則被應用到某一個元素上時，權重是一個決定哪種規則生效，或者是優先順序的過程。

參考閱讀【Selector Specificity】

每個選擇器都有自己的權重。你的每條css規則，都包含一個權重級別。 這個級別是由不同的選擇器加權計算的，通過權重，不同的樣式最終會作用到你的網頁中 。

參考閱讀【Understanding specificity】

如果兩個選擇器同時作用到一個元素上，權重高者生效。

個人理解：權重顧名思義就是權力誰重，就是決定誰是老大，誰說了算。

（1）、相同的權重：以後面出現的選擇器為最後規則;

（2）、不同的權重，權重值高則生效:

選擇器可能會包含一個或者多個與權重相關的計算點，若經過計算得到的權重值越大，則認為這個選擇器的權重高。

權重記憶口訣。從0開始，一個行內樣式+1000，一個id+100，一個屬性選擇器/class或者偽類+10，一個元素名或者偽元素+1。（具體參考連結的網址）

2、偽元素後面單冒號和雙冒號的區別？

        CSS3規範中的要求使用雙冒號(::)表示偽元素，以此來區分偽元素和偽類，比如::before和::after等偽元素使用雙冒號(::)，:hover和:active等偽類使用單冒號(:)。除了一些低於IE8版本的瀏覽器外，大部分瀏覽器都支援偽元素的雙冒號(::)表示方法。然而，除了少部分偽元素，如::backdrop必須使用雙冒號，大部分偽元素都支援單冒號和雙冒號的寫法，比如::after，寫成:after也可以正確執行。雖然CSS3標準要求偽元素使用雙冒號的寫法，但也依然支援單冒號的寫法。

附上：偽類的使用方法

語法：

selector:pseudo-class {property:value;}

CSS類也可以使用偽類：

selector.class:pseudo-class {property:value;}

（3）偽類的注意事項

偽類就像真正的類一樣，可以疊加使用，沒有數量上限，只要不是互斥的，比如這樣：

em:first-child:hover {color: red;}

（4）可以同時使用多個偽類，而只能同時使用一個偽元素；

3、偽類與偽元素有什麼區別？

（1）偽類本質上是為了彌補常規CSS選擇器的不足，以便獲取到更多資訊；

（2）偽元素本質上是建立了一個有內容的虛擬容器；

（3）CSS3中偽類和偽元素的語法不同：

偽元素的由兩個冒號::開頭，然後是偽元素的名稱。

使用兩個冒號::是為了區別偽類和偽元素（CSS2中並沒有區別）。

當然，考慮到相容性，CSS2中已存的偽元素仍然可以使用一個冒號:的語法，但是CSS3中新增的偽元素必須使用兩個冒號::

一個選擇器只能使用一個偽元素，並且偽元素必須處於選擇器語句的最後。