虚拟类别选择器 ( 其他 )

这篇教学会介绍一些比较少用的虚拟类别选择器，例如 :dir()、:lang()、:modal、:scope 等，这些选择器通常是针对浏览器语系、文字对齐方向或一些其他不常出现的元素而设计，对于正规的显示样式没有太大影响，通常都直接使用默认值，不会特别去使用这些选择器。

教学影片

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

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

“其他、语系”虚拟类别选择器

下方列出和“其他、语系”有关的虚拟类别选择器 ( 支援度 All 表示主流浏览器都支援 )：

:dir()

“:dir()”表示“文字对齐方向”，使用方式有两个，分别是“:dir(ltr)”靠左对齐，以及“:dir(rtl)”靠右对齐，默认值使用电脑语系的对齐设定 ( 绝大多数语系都使用 ltr )，使用后会对应到“所有”对齐方式的元素。

下方的范例执行后，上半部设定为 rtl，就会呈现红色文字，下半部使用默认值 ltr，就会是绿色文字。

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

<!-- HTML 程式碼 -->
<div dir="rtl">
  CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧。
  <ul>
    <li>oxxo</li>
    <li>apple</li>
    <li>banana</li>
  </ul> 
</div>
  
<div dir="ltr">
  CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧。
  <ul>
    <li>oxxo</li>
    <li>apple</li>
    <li>banana</li>
  </ul> 
</div>

<!-- CSS 程式碼 -->
<style>
  body *:dir(rtl) {color: red;}
  body *:dir(ltr) {color: green;}
  /* 效果等同 body * {color: green;} */
</style>

由于 :dir() 是根据元素的 dir 属性来决定是否套用样式，所以与 [dir="ltr"] 或 [dir="rtl"] 有着非常类似的效果 ( 连权重都相同 )，不过两著却有一个显著的差异：:dir() 会选择“所有指定对齐方式的元素”，而 [dir] 则“只会选择具有 dir 属性的元素”。

下方的范例执行后，设定 :dir(rtl) 的选择器不只会选择 div，还会一起选择子元素 ul，所以文字都会变成红色，但如果使用 [dir="rtl"] 就只会选择 div，内层子元素 ul 则不会被影响 ( 因为 ul 没有 dir 属性 )。

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

<!-- HTML 程式碼 -->
<div dir="rtl">
  CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧。
  <ul>
    <li>oxxo</li>
    <li>apple</li>
    <li>banana</li>
  </ul> 
</div>
  
<div dir="ltr">
  CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧。
  <ul>
    <li>oxxo</li>
    <li>apple</li>
    <li>banana</li>
  </ul> 
</div>

<!-- CSS 程式碼 -->
<style>
  body * {background: yellow;}          /* 所有元素背景：黃色 */
  body *:dir(rtl) {color: red;}         /* 靠右對齊的所有元素：紅色文字 */
  body *[dir="rtl"] {background: pink;} /* 具有 dir="rtl 屬性的元素：粉色背景 */
  body *:dir(ltr) {
    color: red;                         /* 靠左對齊的所有元素：紅色文字 */
    background: pink;                   /* 靠左對齊的所有元素：粉色背景 */
  }
</style>

:lang()

“:lang()”表示“语系”，使用方式为“:lang(語系)”，语系名称不区分大小写，例如 en 和 EN 和 En 都会指向 lang="en" 的元素，当 HTML 元素套用了 lang 属性后，内容子元素会全部都套用同样属性。下方列出常见的语系名称：

举例来说，语系 en 的 div 区块会呈现粉色，语系 ja 的 div 区块呈现青色，语系 zh-Hant-TW 区块呈现橘色。

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

<!-- HTML 程式碼 -->
<div lang="en">
  CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧。
</div>
<div lang="ja">
  CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧。
</div> 
<div lang="zh-Hant-TW">
  CSS 選擇器 ( Selector ) 是 CSS 的核心功能，也是使用或學習 CSS 時最重要的技巧。
</div>

<!-- CSS 程式碼 -->
<style>
  div:lang(en) {background: pink;}
  div:lang(ja) {background: cyan;}
  div:lang(zh-Hant-TW) {background: orange;}
</style>

除了单纯套用语系样式，有时也会应用到 q 元素，让不同语系的 q 元素会产生不同嵌套的“标点符号”，下方的例子执行后，英文语系会使用“'、"、<>”互相嵌套，日文语系会使用“{}、[] 和 ()”，繁体中文语系则是“「」、 『』、【】”。

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

<!-- HTML 程式碼 -->
<div lang="en">
  <q>第一層<q>第二層<q>第三層</q>第二層</q>第一層</q>
</div>
  
<div lang="ja">
  <q>第一層<q>第二層<q>第三層</q>第二層</q>第一層</q>
</div>
  
<div lang="zh-Hant-TW">
  <q>第一層<q>第二層<q>第三層</q>第二層</q>第一層</q>
</div>

<!-- CSS 程式碼 -->
<style>
  div:lang(en) q {
    quotes: "\"" "\"" "\'" "\'" "<" ">";
  }
  div:lang(ja) q {
    quotes: "{" "}" "[" "]" "(" ")";
  }
  div:lang(zh-Hant-TW) q {
    quotes: "「"  "」" "『" "』" "【" "】";
  }
</style>

:modal

“:modal”表示“dialog 元素样式”，主要针对 dialog 类型的表单元素，举例来说，点击按钮后会打开 dialog 对话视窗，而 :modal 就能设定相关样式。

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

<!-- HTML 程式碼 -->
<button onclick="favDialog.showModal();">開啟對話視窗</button>
<dialog id="favDialog">
  <form method="dialog">
    <p>OXXO.STUDIO</p>
    <button>關閉</button>
  </form>
</dialog>

<!-- CSS 程式碼 -->
<style>
  :modal {
    background: orange;
    border: 2px solid black;
    color: red;
  }
</style>

:scope

“:scope”表示“指定作用域”，大多数的状况都与 :root 相同，但因为 :scope 具有不支援 IE 的特性，有时会用来区分 IE 和其他浏览器，下方的范例在 IE 执行时背景会是橘色，在其他浏览器执行时则是青色。

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

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

<!-- CSS 程式碼 -->
<style>
  ul {background: orange;}      /* IE 會執行 */
  :scope ul {background: cyan;} /* IE 不會執行 */
</style>

:first、:right、:left

“:first、:right、:left”表示“打印的页面设定”，使用时需要搭配 @page 使用，可使用的样式属性只有 margin、padding、border，如果打印的书写方向是从左到右，那第一页为 :right，如果方向是从右到左，那第一页为 :left，用法如下：

@page :right {
  margin: 2in 3in;
}
@page :left {
  margin: 2in 3in;
}
@page :first {
  margin: 2in 3in;
}

小结

这篇教学所介绍的虚拟类别选择器，都是属于比较“冷门”的选择器，当中最实用的可能就是“语系相关”的选择器，如果有多语系的需求，不妨可以使用看看，其他还有 :fullscreen、:future、:local-link 或 :paused 等更冷门的虚拟类别选择器，甚至连浏览器都还不支援，期望不久的将来可以陆续支援啰～

• 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

意见反馈