您是否曾经发现自己要么写了一个看起来非常混乱的 CSS 选择器，要么在阅读别人的代码时看到了一个？前几天我就遇到了这种情况。
以下是我编写的代码
.site-footer__nav a:hover u003e svg ellipse:first-child { }最后，我甚至无法向自己解释它是如何工作的。哈哈，这可能意味着有更好的方法来编写它。
但是 Kitty Giraudel 有一个方便的新工具，可以解释您输入的任何选择器。
以下是它对我的代码的解释
一个
<ellipse>元素，只要它是其父元素的第一个子元素
… 在一个<svg>元素内部
… 本身直接在<a>元素内部，只要它被悬停
… 本身在某个地方
… 在具有类site-footer__nav的元素内部。
太棒了！它甚至会输出选择器的特异性。👏