1. Preferences of CSS selectors and selectors

Knowledge forward

In addition, CSS properties set on parent elements can be inherited by quilt elements

Here the teacher said or relatively basic let’s look at a few classic interview questions —

[1] What are CSS selectors?

Let’s start by looking at what CSS selectors are available!

  • Id selector # myId

  • Class selector.myClassName

  • Tag selector div H1 P

  • The adjacent selector h1 + P

This selector is used to select the element immediately after the first selector (in this case, p is selected whenever h1 and P are adjacent!).

Of course, it’s ok to have multiple neighbors

If a Li is next to four Li’s, Li + Li will choose the next four Li’s!

  • Child selector ul > Li

  • Descendant selector Li A

I used to wonder why we need child selectors when we have offspring selectors

Then the MDN documentation mercilessly mocked me as “I expected you careless bastard to forget the particularity of child selectors” —

When the > selector is used to separate two elements it matches only those second elements that are direct descendants of the first

When linked by a descendant selector, it matches any existing second element that has the first element as an ancestor (not just a child) no matter how many times it “jumps” in the DOM

  • Wildcard selector *

  • Property selector a[href=”www.juejin.cn”]

You’ve never seen this before, either! Click here for details

In the example above, the selected element is “all a tags with href attribute www.juejin.cn”

  • Pseudo class selector

    • A: Hover mouse hover style

    • Li :nth-child(n) selects each Li belonging to the NTH child of the li parent

  • Pseudo element selector

    • ::after(CSS3 with two colons and CSS2 with one colon) is used to create a pseudo-element as the last child of the selected element. Decorative content is usually added to the element in conjunction with the Content attribute

Note the difference between the pseudo-class selector (left) and the pseudo-element selector (right).

[2] Which attributes can be inherited?

Some CSS properties can be inherited by quilt elements and some can’t

  • Inheritable styles

    • font-size

    • font-family

    • color

  • Non-inheritable style

    • border

    • padding

    • margin

    • width

    • height

    That certainly ~ if these styles can be inherited then the page will not be a mess

    So we do not have to deliberately back

    Just think about what attributes can never be passed down from the parent during development

    [3] CSS priority

Here’s an interesting picture

So just to summarize

! Important > Inline Style > ID selector > Class selector = Pseudo-class selector = Property selector > Label selector = pseudo-element selector > Wildcard selector > Browser Default Style

To put it numerically (and in the picture above), it is

! important = 10000

Inline style = 1000

Id selector = 0100

Class selector Pseudo-class selector property selector = 0010

Label selector Pseudo-element selector = 0001

Wildcard selector = 0000

Note that 100 ID selectors are not as weighted as inline. The 1000, 100 is just an example. In fact, the effect is decisive. Look at the example above and you can see that 100 fish still have to be eaten by sharks