CSS learning Diary -CSS selector - Moment For Technology

Recently, I found that CSS is forgotten, so I need to review CSS again. I will open this series to review and update the knowledge I have learned. After all, the old is the new.

Simple selector

First, some basic selectors, which I categorize as simple selectors. I won’t go into their usage here.

* {}

Wildcard selector

e { }

Element selector

#id { }

Id selector that allows only one occurrence in the page. It also has the highest weight

.calss { }

Class selector, which can appear multiple times

<! Class ="class1 class2"></div\> An element can have more than one class separated by a space.Copy the code

Property selector

There is a class of selectors that select elements’ attributes and need to be used in conjunction with element selectors, which I will call attribute selectors

Property selectors are wrapped with []. Attribute values should also be quoted.

e[attr] { }

The element with the attr attribute

e[attr=”val”] { }

The element with the attr attribute and the value val.

e[attr|=”val”] { }

The attr attribute has a value of val or an element beginning with val-

The value must be the entire word or hyphenated.

e[attr^=”val”] { }

The element whose value of the attr attribute begins with val

e[attr$=”val”] { }

The element whose value of the attr attribute ends in val

e[attr~=”val”] { }

The attr attribute contains the element with the value val

Use to select the element whose attribute value contains the specified term. Separate words with Spaces

e[attr*=”val”] { }

The value of the attr attribute contains elements of val

You can find two that start with a value and two that contain properties

Let’s break down the differences

<a title="web">1</a\>   
<a title="website">2</a\>   
<a title="web-site">3</a\>   
<a title="web site">4</a\> 
Copy the code

The first is to start with the value

1,2,3, and 4 elements are selected for a[title^=”web”]{}

For a [title | = “web”] {}. The only selected 1, 3

We can draw

A [title^=”web”]{}. The property value is treated as an entire string, as long as it begins with web. Is selected

A [title | = “web”] {} is selected web or web – at the beginning. Two words need to be connected with –

Then include the value

1,2,3, and 4 elements are selected for a[title*=”web”]{}

For a[title~=”web”]{}. Only 1,4 are selected

We can draw

A [title*=”web”]{}. Property value String As long as there is web, select

A [title~=”web”]{} Yes The corresponding word web is selected. Separate multiple words with Spaces

Upper selector

The next selector is one level up from the previous selector. Kind of a selector of a selector. This is what I call the top selector (this is my own understanding of the classification)

E F { }

Descendant selectors that match all F selector elements (including children and grandchildren) below E selector elements, separated by a space

E>F { }

Child element selector, the only element that matches the E selector is the F selector in its children. Their grandchildren will not choose it

E+F { }

Adjacent sibling selectors, the first f-conforming element of the sibling immediately after the e-conforming element, have the same parent.

E~F { }

Full-sibling selectors, which select F selectors from all siblings that match E selectors.

EF { }

An intersection selector that matches both an E selector element and an F selector element, with no Spaces in between

E,F { }

Union (multi-element) selectors that match elements conforming to E or F, separated by commas

The basic CSS selectors are now reviewed. Next, I will tidy up some common CSS properties, and update my lack of content and use skills

CSS learning Diary -CSS selector