Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

How many css selectors are there?


May 30, 2021 Article blog


Table of contents


Learned the css selector and combed through the knowledge here:

First, the basic selector

1, id selector (highest priority 0100)

e.g. #id.

2, class selector (second priority 0010)

e.g. .class.

3, label selector (lowest priority 0001, involving the widest)

e.g. div....?

Second, strengthen the selector

1, descendant selectors (selector names separated by spaces)

e.g.: #wrap p.... id for all p tags under wrap....?

2, the child selector (selector name between the use of a greater than the sign '>' to connect)

e.g.: #wrap> p.... id is a child p tag under wrap.

In combination with the actual detailed explanation of this child selector:

 How many css selectors are there?1

Style presentation:

 How many css selectors are there?2

3, combination selector (selector name between the comma ', ' separated)

e.g. #wrap, .con p.... id for wrap and p label under class name con both use this selector....?

A combined selector means that multiple labels that meet selector rules are in the same css style

Third, other enhanced version of the selector

1, wildcard selector (rarely used, not very meaningful)

e.g.:

2, adjacent selectors (also known as adjacent selectors, the use of large probability, the use of a plus sign "plus" to connect the two selectors)

e.g.:.con-p'... The brother p label of the class name con meets this condition, noting that the sibling label does not work.....

3, pseudo-class selector

e.clearfix:after.... Sublabels that act on a label named clearfix...

4, property selector

Tentative explanation

5. Explain the difference between div.wrap and div.wrap.

Note: The difference between div.wrap and div.wrap is that there are spaces between div and .wrap.

(1) The div.wrap selector with spaces is the descendant selector we introduced earlier, meaning that all classes under the div label named wrap comply with the filter.

(2) Div.wrap without spaces is directly connected, meaning that the label is named div and the class name is wrap for compliance filtering

For example: div.con-box...." Class named con and id box "div label conforms to filtering...."