选择器解释

您是否发现自己编写了一个CSS选择器，看起来有点混乱，或者在阅读某人的代码时看到了它？ 那一天发生在我身上。

这是我写的：

.site-footer__nav a:hover > svg ellipse:first-child { }

最后，老实说，我什至无法向自己解释。 大声笑，这可能意味着有更好的方式编写它。

但是Hugo Giraudel拥有这个方便的新工具，它将解释您向其抛出的任何选择器。

这是它对我的解释：

一个<ellipse>元素，条件是它是其父元素的第一个子元素
…在<svg>元素内
…本身直接在<a>元素内（只要将其悬停）
……本身在某处
…在class site-footer__nav类的元素中。

太棒了！ 它甚至吐出了选择器引导的特殊性。 👏

直接连结→

翻译自: https://css-tricks.com/selectors-explained/