"*" appears at the top in CSS specifics, why?

Question

I am having trouble understanding why my CSS is not designed according to how I understand the specifics rules. According to my reading of the Internet (including this calculator ) *(fits all) has no specificity, and an element (eg h1, h2etc.) ranked fourth, and the third - the third. But this is not what I see in the Chrome debugger.

In appearance, *came out on top, and then h5, and then two more *, and then a match for the class .orange. Is *should be after anything else? And shouldn't he .orangewin over h5? What's happening?

Answer 1

* - , .

. .

some-element :

<div class="row orange">
    <div class="col-xs-10">
        <h5 class="detail1">
            <some-element></some-element>

, . - , CSS, CSS.

CSS