Technical exchange QQ group :1027579432, welcome to join!

1. What is a compound selector

  • In CSS, the selector can be divided into basic selector and compound selector according to the type of selector. Compound selector is built on the basis of the basic selector, which is formed by combining the basic selector.
  • The compound selector can select the target element (tag) more accurately and efficiently.
  • Composite selectors are composed of two or more basic selectors combined in different ways.
  • Common compound selectors include:
    • Descendant selector
    • Child selectors
    • Union selector
    • Pseudo class selector

2. Descendant selector [important]

  • Descendant selectors, also known as inclusion selectors, can select children of a parent element. Write the outer label on the outside and the inner label on the back, separated by space. When the tags are nested, the inner tags become the offspring of the outer tags.
  • Syntax format: 
    Element 1 Element 2 {style declaration; }Copy the code
  • The above syntax indicates that all elements 2(descendant elements) of element 1 are selected.
  • Such as: 
    Ul li {style declaration; /* Select */} from ul that contains all the li tagsCopy the code
  • Element 1 and element 2 must be separated by a space.
  • Element 1 is the parent, element 2 is the child, and finally element 2 is selected.
  • Elements 1 and 2 can be any base selector.
1.2 Sub-selectors [Important]
  • Child element selectors (child selectors) can only select the nearest child element of an element. The simple definition is to choose the parent son element.
  • Syntax format: 
    Element 1> element 2 {style declaration; }Copy the code
  • Such as: 
    Div >p {style declaration; /* Select all the nearest level p tag elements in div */}Copy the code
  • Element 1 and element 2 are separated by a greater-than sign.
  • Element 1 is the parent, element 2 is the direct child, and element 2 is finally selected;
  • Element 2 has to be a parent child. It doesn’t have to be a parent child, or a great-grandson, or whatever. You can call it a parent child selector.

3. Union selector [important]

  • Union selectors can select groups of labels while defining the same style for them, usually for collective declarations.
  • The union selector is the selector connected by comma, any form of selector can be part of the union selector;
  • Syntax format: 
    Element 1, element 2 {style declaration; }Copy the code
  • The syntax above indicates the selection of elements 1 and 2.
  • Such as: 
    Ul,div {style declaration; /* Select ul div tag elements */}Copy the code
  • Elements 1 and 2 are separated by commas, which can be interpreted as and, and union selectors are often used for collective declarations.

4. Pseudo-class selectors [emphasis]

  • Pseudo-class selectors are used to add special effects to certain selectors, such as adding special effects to links, or selecting the first, NTH element.
  • Pseudo-class selector writing is characterized by colons:, such as hover and :first-child.
  • Because there are many pseudo-class selectors, such as link pseudo-class, structure pseudo-class and so on, we first introduce the commonly used link pseudo-class selectors.
4.1 Link Pseudo-class selectors [emphasis]
  • Syntax format: 
    A :link /* Select all unvisited links */ a:visited /* Select all visited links */ a:hover /* Select links over which the mouse pointer is located */ a:active /* Select active links (mouse down unplayed links) */Copy the code
  • Considerations for linking pseudo-class selectors:
    • To be effective, declare in LVHA order: Link, :visited, :hover, :active;
    • Mnemonic: Lv bag Hao;
    • Because the a link has a default style in the browser, the actual development needs to specify a separate style for the link;
  • The link pseudo-class selector is written in practice:
/* a is all the links in the tag selector */ a {color: Gary; */ a:hover {color: red; /* Change the color from grey to red */}Copy the code
4.2: Focus pseudo-class selector
  • The :focus pseudo-class selector is used to select the form element that gets focus.
  • The focus is the cursor, which is normally only available for <input> form elements, so this selector is also for form elements. 
    input:focus {
    backgroud-color: yellow;
}
Copy the code

5. Compound selector summary

6. Data download

  • Notes and code, welcome to Star, Follow,fork……