CSS 特殊樣式屬性 all、appearance

CSS 有一些特殊的樣式屬性，例如 all、appearance 等，這些樣式屬性並不負責外觀，而是處理繼承特性或強制隱藏元素預設樣式，這篇教學會介紹這些樣式屬性。

快速導覽：

• all 所有樣式
• appearance 瀏覽器預設樣式

all 所有樣式

all 是 CSS 後來推出的樣式屬性，目前大多數的瀏覽器已經都支援 ( IE 不支援 )，主要可以將元素的「所有樣式屬性」進行「完全繼承、完全不繼承或使用預設值繼承」，all 會使用全域關鍵字作為屬性值：

延伸閱讀：全域關鍵字與文字數值

下方的範例執行後，會使用 all 的方式，設定元素所有的樣式屬性，當中比較特別的是 .c 的 div，因為所有樣式重設，display 的樣式屬性變成 inline，結果就不會強制換行。

• 通常在使用時，並不會一次性的調整所有樣式屬性，建議除非特殊情形，不然一律避免使用 all。
• direction 和 unicode-bidi 是唯二不受 all 影響的樣式屬性。

線上展示：https://codepen.io/oxxo/pen/jOoBjQG

<!-- HTML 程式碼 -->
<div class="a">
  <div>oxxo.studio</div>   <!-- 這個 div 使用預設值 -->
  <div class="b">hello world</div>
  <div class="c">hello world</div>
  <div class="d">hello world</div>
</div>

<!-- CSS 程式碼 -->
<style>
  .a {
    font-size: 30px;
    color: red;
    border: 1px solid black;
    margin: 10px;
  }
  .b {
    all: inherit;
  }
  .c {
    all: initial;
  }
  .d {
    all: unset;
  }
</style>

appearance 瀏覽器預設樣式

appearance 是 CSS 後來推出的樣式屬性，早期的版本具有廠商前綴字樣，例如 -moz-appearance 或 -webkit-appearance，這個樣式屬性可以「關閉或開啟瀏覽器的預設樣式」，主要針對具有預設樣式的「表單元素」，例如 button、checkbox 等，沒有繼承特性，具有下列的屬性值：

下方的範例執行後，所有表單元素通除了自己本身的預設樣式，還會多套一層瀏覽器提供的預設樣式，因此在不同瀏覽器中，看到的按鈕或其他表單元素，長相都會不太像同，但如果使用 appearance: none 就會關閉瀏覽器提供的樣式，呈現元素本身的預設樣式，因此如果要修改表單相關元素，通常都會使用這個樣式屬性輔助。

線上展示：https://codepen.io/oxxo/pen/ByaaoMX

<!-- HTML 程式碼 -->
<form class="a">
  帳號<br><input type="text"><br>
  密碼<br><input type="password"><br>
  性別<br>
  <input type="radio" name="a">男生
  <input type="radio" name="a">女生<br>
  喜歡什麼<br>
  <select>
    <option value="11">apple</option>
    <option value="12">banana</option>
    <option value="13">oxxo</option>
  </select><br>
  想說的話<br>
  <textarea cols="20" rows="5" name="content"></textarea><br>
  <button>送出</button>
</form>
<form class="b">
  帳號<br><input type="text"><br>
  密碼<br><input type="password"><br>
  性別<br>
  <input type="radio" name="b">男生
  <input type="radio" name="b">女生<br>
  喜歡什麼<br>
  <select>
    <option value="11">apple</option>
    <option value="12">banana</option>
    <option value="13">oxxo</option>
  </select><br>
  想說的話<br>
  <textarea cols="20" rows="5" name="content"></textarea><br>
  <button>送出</button>
</form>

<!-- CSS 程式碼 -->
<style>
  form {
    width: 200px;
    float: left;
    border: 1px solid #000;
    margin: 5px;
    padding: 10px;
  }
  .b * {appearance: none;}      /* 關閉瀏覽器預設樣式 */
  input[type=radio]{
    width: 20px;
    height: 20px;
    border: 3px dashed #000;    /* 修改 radio button 樣式 */
  }
  input[type=radio]:checked{
    background: red;            /* 修改點擊 radio button 效果 */
  }
</style>

小結

這篇教學所介紹的 CSS 特殊樣式屬性都是比較新的 CSS 樣式屬性，不僅可以一次設定所有樣式或禁止某些樣式，搭配全域關鍵字更能快速繼承或還原全部樣式屬性，是相當有用的功能。

延伸閱讀：全域關鍵字與文字數值

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～