特殊样式属性 ( all、appearance)

CSS 有一些特殊的样式属性，例如 all、appearance 等，这些样式属性并不负责外观，而是处理继承特性或强制隐藏元素默认样式，这篇教学会介绍这些样式属性。

快速导览：

• all 所有样式
• appearance 浏览器默认样式

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

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 样式属性，不仅可以一次设定所有样式或禁止某些样式，搭配全域关键字更能快速继承或还原全部样式属性，是相当有用的功能。

延伸阅读：全域关键字与文字数值

意见反馈