Why learn CSS composite selectors

CSS selectors are divided into basic selectors and composite selectors, but the basic selectors can not meet our actual development, fast and efficient selection labels.

The goal is to be able to select more accurate and refined target element tags.
A composite selector is a combination of two or more base selectors in different ways

1. Descendant selector

Concept: 1.1.

Descendant selectors are also known as inclusion selectors

1.2. :

Used to select the descendants of an element or group of elements

Its writing method is to write the outer label in front of the inner label in the back, the middle of the space separated, first write father grandfather, in writing son grandson.

Parent child {property: property value; Attribute: attribute value; }Copy the code

1.3. Grammar:

.class h3{color:red; font-size:16px; }Copy the code

When the tags are nested, the inner tags become the offspring of the outer tags.
Posterity can do that. In other words, it can select any tag that is included.

2. Child element selectors

2.1. :

The child element selector can only select elements that are children of an element.

It is written with the parent tag in front, the child tag in the back, followed by one in the middle>To connect

2.2. Grammar:

.class>h3{color:red; font-size:14px; }Copy the code

The son here refers to the biological son does not include grandchildren and so on.

Vernacular:

.demo > h3 {color: red; } H3 must be the son of Demo. The demo element contains h3.Copy the code

3. Intersection selector

Conditions of 3.1.

The intersection selector is composed of two selectors. The tag found must meet the characteristics of both tag one and tag two.

3.2. Grammar:

The first is a label selector and the second is a class selector. There can be no space between the two selectors, such as h3.special.

Memory techniques:

Intersection selector means and. That is… Again… The meaning of

For example, p.one selects the paragraph tag with the class name.one.Copy the code

Use is relatively rare, not recommended.

4. Union selector

4.1 application:

If some of the selectors define the same style, you can take advantage of union selectors, which can make your code more concise.
Union selectors (CSS selectors grouping) are the individual selectors passed through.Connected, usually used for group declarations.

4.2. Grammar:

Any kind of selector (including label selector, class class selector ID selector, etc.) can be part of a union selector.
Memory techniques:

Union selectors are usually used for collective declarations, separated by commas, all of which execute the following styles. Commas can be understood as meaning and.

For example. One, p, #test {color: #F00; } indicates that. One and p and #test will all execute red. Usually used in group statements.Copy the code

He and he, together, together means together

5. Link pseudo-class selectors

Pseudo-class selector:

To distinguish it from the class selector that we just learned is a dot like.demo {} and our pseudo-class has two dots like colons like :link{} pseudo-girl

5.1. :

Used to add special effects to certain selectors. For example, you can add special effects to links, such as selecting the first or the NTH element.

Because there are many pseudo-class selectors, such as link pseudo-classes, structural pseudo-classes and so on. We are going to show you the link pseudo-class selector.

A :link /* Unaccessed link */
A: This is the first time that we have visited China
A :hover /* Mouse move to link */
A :active /* Selected link */

Pay attention to
When writing, try not to reverse their order by lvHA. Otherwise errors may be caused.
Memory method
- I love hate you
- Lv bags are very hao
Because it is called link pseudo-class, so all use intersection selector A :link a:hover
Because the A link browser has a default style, we actually need to style the link separately in our work.
In actual work development, we rarely write all four states. Generally, we write as follows:

A {/* a is all the links in the tag selector */ font-weight: 700; font-size: 16px; color: gray; } a:hover {/* :hover is a link to the pseudo-class selector mouse over */ color: red; /* When the cursor passes over it, the grey color changes to red */Copy the code

5.2. Get focus elements

The :focus pseudo-class selector is used to select the element that gets focus. Our focus here is on form elements

:hover

Grammar:

.total input { border: 1px solid #ccc; height: 30px; width: 40px; transition: all .5s; } /* This input gets focus */. Total input:focus {width: 80px; border: 1px solid skyblue; }Copy the code

6. Compound selector summary

The selector	role	Characteristics of the	usage	Separator symbol and usage
Descendant selector	Used to select the offspring of elements	Is to choose all the offspring	more	Symbol isThe blank space .nav a
Child selector	Select the most recent element	Choose your son only	less	The symbol is >.nav>p
Intersection selector	Select the part of the intersection of the two labels	Both are	less	There is no sign p.one
Union selector	Select some selectors of the same style	Can be used for group statements	more	Symbol isThe comma .nav, .header
Link pseudo-class selectors	Change the status of the link		more	Focus on the way a{} and a:hover are actually developed

CSS composite selector