虚拟类别选择器 ( 行为 )

用户在浏览网页时，往往会有点击、悬停之类的操作行为，CSS 也有专门针对这些操作行为的虚拟类别选择器，例如 :hover、:active、:focus、:focus-visible、:focus-within 等等，只要元素状态因操作行为发生改变，就能透过这些虚拟类别选择器套用对应的样式，这篇教学会介绍如何使用“用户操作行为”的虚拟类别选择器。

教学影片

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

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

“用户操作行为”虚拟类别选择器

下方列出和“用户操作行为”有关的虚拟类别选择器 ( 支援度 All 表示主流浏览器都支援 )：

:hover

“:hover”表示“鼠标悬停在某个元素上”，通常会搭配“超链接”相关的虚拟类别选择器，或与“指定元素名称”一同使用，下方的范例执行后，鼠标移动到 a 元素上方，a 元素就会改变文字和背景颜色。

线上展示：https://codepen.io/oxxo/pen/eYaZRqg

<!-- HTML 程式碼 -->
<nav>
  <a>oxxo</a>
  <a>apple</a>
  <a>banana</a>
  <a>orange</a>
</nav>

<!-- CSS 程式碼 -->
<style>
  a:hover {
    background: blue; 
    color:white;
  }
</style>

:hover 常与一些互动效果有关，例如鼠标悬停在某个选项后展开子选单、出现提示消息....等，下方的范例执行后，当鼠标移动到 a 上方，会显示原本默认隐藏的 ul 元素。

注意，:hover 主要针对“鼠标”的悬停行为，下方两种状况需要改用其他虚拟类别选择器：

• 键盘切换焦点操作：使用 :focus。
• 移动设备触控互动效果：使用 :active。

线上展示：https://codepen.io/oxxo/pen/OJYNjPe

<!-- HTML 程式碼 -->
<nav>
  <a>oxxo
    <ul>
      <li>oxxo.studio</li>
      <li>STEAM 教育學習網</li>
      <li>oxxo's blog</li>
    </ul>
  </a>
  <a>apple</a>
  <a>banana</a>
  <a>orange</a>
</nav>

<!-- CSS 程式碼 -->
<style>
  a {position: relative;}
  a ul {
    display: none;          /* 隱藏 ul */
    position: absolute;
    border: 1px solid #000;
    color: #000;
  }
  a:hover {
    background: blue; 
    color: white;
  }
  a:hover ul {display: block;}  /* 顯示 ul */
</style>

:active

“:active”表示“某个元素处在被点击的状态”，通常会搭配“超链接”相关的虚拟类别选择器，或与“指定元素名称”一同使用，下方的范例执行后，只要是“正在被鼠标点击”的 li，就会变成蓝底白字的样式，放开鼠标后又会回到原本的样式。

因为“移动设备”没有“鼠标悬停”的行为，因此常使用 :active 选择器显示“移动设备的触控点击”效果。

线上展示：https://codepen.io/oxxo/pen/QWRNMaG

<!-- HTML 程式碼 -->
<ul>
  <li>oxxo</li>
  <li>apple</li>
  <li>banana</li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  li:active {
    background: blue;
    color: white;
  }
</style>

:focus

“:focus”表示“某个元素处在焦点状态”，所谓的“焦点状态”，表示用户的键盘光标 ( 不是鼠标 ) 正在这个元素之上，因此这个选择器除了搭配“超链接”相关的虚拟类别选择器，几乎都与“输入”相关元素有关，因此许多无障碍网页使用的“键盘切换超链接”或“键盘展开选单”的功能，也都会搭配 :focus 选择器。

下方的范例执行后，只要是“处在焦点状态”的 a，除了会出现“浏览器标示焦点的外框”，还会变成蓝底白字的样式并展开藏的 ul 选单，然而范例同时也支援 :hover 选择器，可以使用鼠标打开选单，如果要观察效果，可以打开线上展示网页，用键盘 tab 键切换选单 ( 按下 tab 键时，焦点会先切换到 input 元素 )。

使用 outline:none; 的样式属性，可以移除浏览器标示焦点的外框。

线上展示：https://codepen.io/oxxo/pen/bGyprPq

<!-- HTML 程式碼 -->
<form>
  <input type="text">
  <br/>
  <input type="text">
</form>
<nav>
  <a href="#">oxxo
    <ul>
      <li>oxxo.studio</li>
      <li>STEAM 教育學習網</li>
      <li>oxxo's blog</li>
    </ul>
  </a>
  <a href="#">apple</a>
  <a href="#">banana</a>
  <a href="#">orange</a>
</nav>

<!-- CSS 程式碼 -->
<style>
  a {position: relative;}
  a ul {
    display: none;     /* 隱藏 ul 子選單 */
    position: absolute;
    border: 1px solid #000;
    color: #000;
  }
  a:hover, a:focus {
    background: blue;  /* 成為焦點或滑鼠點擊時變色 */
    color: white;
  }
  a:hover ul, a:focus ul{
    display: block;    /* 成為焦點或滑鼠懸停時，顯示 ul 子選單 */
  }
</style>

:focus 默认只能作用在输入元素或超链接元素，但如果替元素加入“tabindex="0"”的属性，就能让该元素也支援 :focus 选择器，下方范例执行后，使用鼠标点击或键盘 tab 切换焦点，可以发现焦点会切换到有加上 tabindex="0" 的元素，没有加上属性的元素则不会被焦点锁定。

线上展示：https://codepen.io/oxxo/pen/pomyWRK

<!-- HTML 程式碼 -->
<ul>
  <li tabindex="0">oxxo</li>    <!-- 滑鼠點擊或鍵盤 tab 切換會出現樣式 -->
  <li>apple</li>
  <li>banana</li>
  <li tabindex="0">orange</li>  <!-- 滑鼠點擊或鍵盤 tab 切換會出現樣式 -->
</ul>

<!-- CSS 程式碼 -->
<style>
  li:focus {
    background: blue; 
    color: white;
  }
</style>

:focus-visible

“:focus-visible”表示“某个元素处在明确焦点状态”，“明确焦点状态”主要针对“button 元素”和“有 tabindex="0" 的元素”，通常使用 :focus 选择器之后，这两种类型的元素在鼠标点击和键盘 Tab 切换焦点时，都会套用同样的样式，但如果使用 :focus-visible，就能明显区隔是鼠标点击还是键盘 Tab 切换焦点。

下方的范例执行后，如果使用鼠标点击上半部的元素，周围会出现成为焦点的外框，点击下半部的元素则不会出现外框，但如果使用键盘 Tab 切换，则全部都会有成为焦点的外框。

使用 outline 样式属性，可以移除或修改浏览器标示焦点的外框。

线上展示：https://codepen.io/oxxo/pen/QWRNqqm

<!-- HTML 程式碼 -->
<button>滑鼠點擊有外框，鍵盤切換有外框</button>
<ul>
  <li tabindex="0">oxxo</li>
  <li tabindex="0">apple</li>
  <li tabindex="0">banana</li>
  <li tabindex="0">orange</li>
</ul>

<button class="b">滑鼠點擊「沒有」外框，鍵盤切換有外框</button>
<ul class="b">
  <li tabindex="0">oxxo</li>
  <li tabindex="0">apple</li>
  <li tabindex="0">banana</li>
  <li tabindex="0">orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  button:focus, li:focus {
    outline: 2px solid red;
    color: red;
  }
  .b:focus, .b li:focus {
    outline: none;
  }
  .b:focus-visible, .b li:focus-visible {
    outline: 2px solid red;    /* 鍵盤切換焦點時，才會出現外框 */
  } 
</style>

:focus-within

“:focus-within”表示“某个元素的子元素，处在焦点状态”，例如下方的范例，Class 为 a 的 li 套用了 :focus-within 选择器，这时如果它的子元素 span 处于焦点状态，则这个 li 就会按照指定样式变色，但其他的 li 因为没有套用 :focus-within 选择器，就只有 span 本身变色。

线上展示：https://codepen.io/oxxo/pen/dyEMZPv

<!-- HTML 程式碼 -->
<ul>
  <li class="a"><span tabindex="0">oxxo</span></li>
  <li><span tabindex="0">apple</span></li>
  <li><span tabindex="0">banana</span></li>
  <li><span tabindex="0">orange</span></li>
</ul>

<!-- CSS 程式碼 -->
<style>
  li {width: 200px;}
  span:focus {background: red;}
  .a:focus-within {
    background: gray;
    border: 1px solid red;
  }
</style>

小结

当网页需要“和用户互动”时，绝对少不了“用户操作行为”虚拟类别选择器，虽然通常 :hover 可以满足大多数的状况，但其他的选择器却能辅助设计，减少需要大量 CSS 或使用 JavaScript 才能处理的细节效果。

• W3C 官方参考：https://www.w3.org/TR/2018/SPSD-html5-20180327/disabled-elements.html
• MDN 文件参考：https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

意见反馈