This is the 7th day of my participation in Gwen Challenge

A few small discoveries about pseudo-element selectors

Mainly refer to the article: www.zhangxinxu.com/wordpress/2…

What is a pseudo-element selector

Simply put, CSS defines an element that does not exist.

As shown, the HTML code has only p elements, but when CSS defines a pseudo-element ::first-line, only the first line of the P element will be styled.

Pseudo-element selectors currently exist in the following categories:

  1. ::after: Creates the pseudo-element before the element
  2. ::before: Creates the pseudo-element after the element
  3. ::first-letter: Selects the first letter of the element
  4. ::first-line: selects the first line of the element
  5. :: Selection: selects part of the element selected by the user

Effective premise

  1. The display computed value of the element must be block, inline-block, table-cell, list-item, or table-caption

    Using pseudo-element selectors for spans does not work.

    Guess: Is it because the pseudo-element actually generates an inline element?

  2. Some special characters are considered auxiliary characters, as follows:

    Spaces are also considered auxiliary characters, and they behave as follows: when ::first-letter is set to red

    Auxiliary characters:

    Non-auxiliary characters:

    That is, auxiliary characters turn red along with the first word.

  3. The characters used cannot display: inline-series properties such as inline-block, inline-flex, inline-table, inline-grid.

    If the character property is display: flex, Grid, none. Properties such as float and float are not discarded directly, and characters are applied to the next conforming element.

  4. Only certain CSS properties take effect

    1. All font related attributes:font.font-style.font-variant.font-weight.font-size.line-heightAs well asfont-family.
    2. All background related attributes:background-color.background-image.background-position.background-repeat.background-size, as well asbackground-attachment.
    3. allmarginRelated attributes:margin.margin-top.margin-right.margin-bottom.margin-left.
    4. allpaddingRelated attributes:padding.padding-top.padding-right.padding-bottom.padding-left.
    5. All border related attributes: abbreviatedborder.border-style.border-color.border-widthAnd the properties of ordinary writing.
    6. colorProperties.
    7. text-decoration.text-transform.letter-spacing.word-spacing(where appropriate),line-height.float.vertical-align(only whenfloatfornoneThese CSS properties.

Priority problem

In fact, the front of those things will not deliberately to remember ha ha ha, write there is just convenient to use when to see. The following is what I want to say. I want to say that if you use first-letter or first-line and the style works, there is almost nothing that can override it.

As follows:

We set p to important:

<head>
    <style>
        /* False element */
        p::first-letter {
            color: pink;
        }
        p{
            color: #abcdef ! important; 
        }
    </style>
</head>
<body>
    <p>One line of code</p>
</body>
Copy the code

The resulting style is: one line of code

It can be seen that the setting of important on P does not take effect, is it not logical? According to the CSS2 specification, pseudo-element selectors should have the same priority as label selectors, with import being the highest priority.

To see why, we open the console and see that the pseudo-element is actually isolated:

So we assume for a moment that the pseudo-element is actually an element that doesn’t exist in the DOM and is a child of the element that the selector works on.

Subelements, right? Well, let me do subelements. We set the color of the p>span element to important:

<head>
    <style>
        /* False element */
        p::first-letter {
            color: pink;
        }
    
        p>span{
            color: #abcdef ! important; 
        }
    </style>
</head>
<body>
    <p><span>one</span>Lines of code</p>
</body>
Copy the code

The resulting style is: one is pink, the rest of the font does not change color.

Since the pseudo-element is a child of P, and span is a child of P, why isn’t it overridden by span style?

What happens if you put other styles on span?

span{
    font-weight: bolder;
    color: #abcdef ! important; 
}
Copy the code

The effect is as follows:

We see that the font is actually bolded (it’s not obvious but it works), so the pseudo-element actually inherits the span font property. Presumably, the pseudo-element exists as a child of span.

It will always exist as the lowest child element, inheriting all inheritable attributes, so no matter how important is set in a span, it will just take precedence over attributes set on a span, and the child elements of a SPAN will inherit all inheritable attributes on a SPAN. Add your own styles on top of that.

Conclusion: The pseudo-element selector overwrites important not because the pseudo-element selector has a higher priority, but because the pseudo-element is the lowest child element.