工具用的順手嗎？
你的回饋能幫助我們做得更好
驗證CSS選擇器在HTML中的匹配效果，快速定位元素
*通配選擇器，匹配頁面中的所有元素。
* { margin: 0; }#idID 選擇器，匹配指定 id 的唯一元素。
#header { color: #111; }.class類選擇器，匹配包含指定 class 的元素。
.btn { border-radius: 8px; }A B後代選擇器，匹配 A 內部任意層級的 B。
nav a { text-decoration: none; }A > B子代選擇器，僅匹配 A 的直接子元素 B。
ul > li { list-style: none; }A + B相鄰兄弟選擇器，匹配緊跟在 A 後面的第一個 B。
h2 + p { margin-top: 0; }A ~ B通用兄弟選擇器，匹配 A 後面所有同級 B。
h2 ~ p { color: #666; }[attr]屬性存在選擇器，匹配包含指定屬性的元素。
input[required] { border-color: red; }[attr=value]屬性值選擇器，匹配屬性值等於指定內容的元素。
a[target='_blank'] { color: #2563eb; }:hover滑鼠懸停偽類，匹配懸停狀態元素。
button:hover { opacity: .9; }:focus焦點偽類，匹配當前獲得焦點的元素。
input:focus { outline: 2px solid #3b82f6; }:nth-child(n)結構偽類，按子元素序號匹配元素。
li:nth-child(2n) { background: #f8fafc; }::before偽元素，在元素內容前插入可樣式化內容。
.tag::before { content: '#'; }::after偽元素，在元素內容後插入可樣式化內容。
.tag::after { content: '✓'; }概覽
了解工具能解決的問題、計算或處理邏輯，以及資料邊界。
這是一份可搜尋的選擇器速查清單。輸入選擇器片段、說明文字或範例中的字詞，結果會列出相符項目的語法、用途簡述與 CSS 範例；可複製選擇器文字，貼回自己的樣式表或編輯器。清單包含通用、ID、類別、屬性選擇器，後代與兄弟關係組合器，以及 hover、focus、nth-child 等偽類和 before、after 偽元素。
CSS 選擇器描述文件中哪些元素符合條件，CSS 規則再把樣式套用到符合的元素。可把它想成「條件」：.card 會找出具有 card 類別的元素；#header 依 id 條件選取；input[required] 則要求元素具有 required 屬性。頁面上的例子是語法參考，不會讀取使用者的 HTML 或回報實際命中的節點。
單一條件通常較容易讀：星號 * 表示所有元素，點號開頭如 .notice 是類別選擇器，井號開頭如 #main 是 ID 選擇器，方括號可檢查屬性存在或屬性值。實務上，元素名稱、類別、ID 與屬性可組合成更精確的條件，例如 button.primary 同時要求標籤為 button 且具有 primary 類別。
組合器則描述兩個條件之間的文件結構關係。空格代表後代，nav a 表示 nav 裡任意層級的連結；大於符號 > 代表直接子元素；加號 + 找緊接在前一元素後的同層元素；波浪號 ~ 找其後符合條件的同層元素。判斷層級時，先問目標是否必須是直接子項，再選 > 或空格。
偽類以冒號表示，描述元素的狀態或位置，例如 :hover 表示指標懸停狀態、:focus 表示取得焦點，:nth-child(2n) 可依同層子項的位置挑出符合序號規則的項目。括號裡的 n 是位置公式的一部分；本清單展示常見寫法，供閱讀和複製。
偽元素以雙冒號表示，例如 ::before 和 ::after，用於選取元素呈現中的特定部分或生成內容。它們不是 HTML 原始碼中新增的普通節點；因此若目標是透過 JavaScript 找回真實 DOM 元素，不能把偽元素當成一般元素來理解。區分單冒號偽類與雙冒號偽元素，有助於讀懂既有規則。
指南
依步驟完成操作，並透過範例核對輸入與結果。
可輸入符號或名稱的一部分，例如 nth-child、attr、hover，也可輸入描述或範例程式碼中的文字。篩選會比對清單項目的選擇器、說明與範例；清空欄位即可重新查看全部項目。
先看左側語法，再確認用途文字與 CSS 範例是否符合你的 HTML 結構。例如查詢 A > B 可查看直接子元素的寫法；若目標可能隔著多層包裝元素，應再比較後代寫法 A B。
使用項目旁的複製操作取得選擇器，貼入 CSS 規則或開發環境。以實際文件結構、目標瀏覽器和互動狀態檢查效果；若需要列出具體命中節點，請在自己的頁面或開發工具中執行測試。
範例中的 A、B 是代表元素條件的佔位符，不是必須原樣輸入的標籤名稱。使用時要換成文件裡實際存在的標籤、類別或屬性條件。
情境
查看這項工具在不同工作與生活流程中的用法。
接手網站樣式時，可把規則中的點號、井號、方括號、冒號與組合器拆開查找，再對照 HTML 結構理解它限制了哪些元素。這份清單提供語法與短例子，方便辨認規則意圖；實際套用結果仍須回到專案頁面查看。
從 .item 開始，再比較 ul > .item 與 ul .item。前者要求直接子元素，後者允許任意深度的後代。每次只改一個條件，就更容易看出選取範圍如何改變。
分享精簡的選擇器表達式與範例，能讓討論聚焦在元素關係或狀態條件。複製後請配合目標頁面的實際 class、id 和 DOM 結構調整，清單本身不會替你辨識頁面元素。
問答
集中解答常見疑問與容易混淆的問題。
不可以。這個頁面只篩選預先列出的選擇器說明與程式碼範例，沒有 HTML 輸入區，也不會執行 DOM 匹配。需要檢查命中節點時，請在目標頁面或瀏覽器開發工具中測試。
搜尋範圍限於清單中的選擇器文字、描述與範例，不會解析任意 CSS 語法或即時新增結果。可改搜其中一段符號、英文名稱或用途關鍵字；若該語法不在清單內，請查閱完整規範或文件。
不能一概而論。清單涵蓋的是示例項目，沒有逐項提供瀏覽器版本相容性判斷。特別是較新的選擇器，應依目標瀏覽器的相容性資料確認，並在實際專案測試。
::before 或 ::after 會被當成一般元素選取嗎？不會。它們是偽元素，用來表示元素呈現中的部分或生成內容，不是一般 HTML 節點。若程式需要取得 DOM 節點，需改查真實元素，並確認使用的 DOM API 對偽元素的限制。
須知
使用前了解適用範圍、結果限制與必要提醒。
本頁提供的是有限的常見語法目錄，並非完整 CSS 選擇器字典、語法驗證器、瀏覽器支援表或 DOM 測試器。範例中的簡寫用來說明結構關係；實際選擇器是否有效，取決於語法、文件結構、使用情境及瀏覽器支援。規範會持續演進，遇到較新的偽類或偽元素時，請以維護中的技術文件和目標環境為準。
推薦
查找相關工具、專題與可用的 API 能力。