Pseudo-elements styles priority

Question

I was playing with pseudo-elements styles and came across a behavior that puzzled me

Consider the following css and html

HTML:

 <p>
        Note: As a rule, double colons (::) should be used instead of a single colon (:). This distinguishes pseudo-classes from pseudo-elements. However, since this distinction was not present in older versions of the W3C spec, most browsers support both syntaxes for the sake of compatibility. Note that ::selection must always start with double colons ::.
    </p>

and styles

p::first-letter {
    font-size: 20px;
    color: red;
}

p::first-line {
    font-variant: small-caps;
    color: green;
}

p::before {
    content: 'Start';
    color: blue;
}

In Chrome the behavior is the following: First letter of ::before content is colored red even though its not content of p and ::before styles do not overwrite color to blue.

Also when there is no letter in ::before content and I put & or * there - all first-line becomes green and no ::first-letter and ::before styles applied.

In Firefox the result of the code provided would be the following:

I'm using latest browser versions under Ubuntu 17.04

So could anyone explain why ::before content is selected by other pseudo-elements selectors and there styles applied and why own ::before styles do not overwrite them even though they are "later" styles.

Answer 1

As for the first line and first letter, this isn't really a problem of specificity. It's just specified like this:

As with the content of regular elements, the generated content of ::before and :after pseudo-elements may be included in any ::first-line and ::first-letter pseudo-elements applied to its originating element.

(source)