It's not possible to give an exact analysis of a browser's implementation unless I look at the source itself. But what I can say is that the browser needs to ensure that the style rule that you add will only apply to that specific element in the working DOM, and classes, whose purpose is to group one or more related elements, are not very well-suited for this purpose.
Because of how classes work, the browser can't assume that your class is only assigned to that span element, because it doesn't know how you author your HTML. The example given by NichoDiaz illustrates a simple but valid example of this: a .helper may not necessarily be a body > div > span, because it could very well be a body > div > div > span instead, either now or later.
So instead of making that assumption about the helper class (even though in your DOM only one element has it), it makes an assumption about the structure of your elements instead, which is far more reliable. Since it sees that there is only one span that is a child of a div that is a child of body, it generates the selector body > div > span for the element for which you've chosen to add a style rule. (Presumably, the reason why it starts with body > instead of html > body > is because body is always a child of html, which makes that additional constraint totally redundant.)
Of course, once you add a second span element, the style rule will apply to that element as well. Again the browser cannot anticipate this, but you can easily modify the rule to add :nth-child(1) to the end of the selector if you don't want the style rule applying to that new element.
If you add the second span element before creating a new style rule on the first, you'll see that the browser generates a slightly more specific selector, body > div > span:nth-child(1). If it had tried to generate a selector using .helper and not :nth-child(1), i.e. body > div > span.helper, it would match both elements, which is clearly not the intended result of highlighting one element and adding a style rule for that specific element.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
