如果這個工具幫到了你,可以請作者喝杯咖啡 ☕
驗證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樣式不生效或JavaScript無法選中元素時,問題往往出在選擇器上。本工具透過解析HTML結構和CSS選擇器表示式,精確找出匹配元素。CSS選擇器是CSS規則中用於定位HTML元素的模式表示式,支援元素名、類、ID、屬性等多種匹配方式。
問:為什麼我的選擇器沒有匹配到任何元素?
檢查:1) 選擇器語法是否正確 2) HTML層級是否匹配 3) 屬性和類名是否拼寫正確
問:工具支援哪些CSS選擇器?
支援所有CSS3選擇器,包括類選擇器(.class)、ID選擇器(#id)、屬性選擇器([attr])、偽類(:hover)等。
僅測試靜態HTML內容,動態生成的DOM元素可能無法匹配。超大HTML檔案可能影響解析速度。
除錯複雜選擇器時,建議從簡單選擇器開始逐步組合測試。例如先測試.item,再測試div.item,最後測試#container div.item[data-id]。典型輸入:<div class="box">內容</div>,選擇器:.box,輸出:匹配到該div元素。