先看這個例子
範圍內預設用灰色，特別標示段落則要綠色。:where 的整個參數都不增加選擇器權重。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 預設選擇器 | :where(.lesson) p | 只有 p 計權重 |
| 覆寫 | .highlight | class 權重較高 |
| 結果 | 查看 color 計算值 | rgb(0,80,40) |
瀏覽器怎樣處理
:where 可配對範圍，而不增加參數權重，令本例預設容易覆寫。它不會取消後代配對，也不會建立 cascade 層。
不用 :where，範圍會加上 class 和類型權重
反例以 .lesson p 設同一灰色預設。
<style>body{margin:8px}</style>
<style>.lesson p{color:rgb(90,90,90)}.highlight{color:rgb(0,80,40)}</style><section class="lesson"><p class="highlight">特別標示的工作坊筆記</p></section>class 加類型的預設權重，高於只有 class 的覆寫，段落仍是灰色。
試着修正
把 .highlight 放較後，就一定勝過權重更高的 .lesson p 嗎？
查看參考答案
不一定。前面的 cascade 條件，包括權重，先要相同，才由原始次序分勝負。
- 比較真正配對的選擇器和 color 值。
- 配對範圍和權重分開理解。