Play CSS selector, a free course I recorded earlier, learning CSS by playing games, combined with videos, is easier to understand

The role of CSS selectors

  • Quickly find the CSS element and style it
  • To paint a wall, you have to find the wall first, not the window…

HTML tags are tree structures

For example, the structure of HTML code looks like this…

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
        <title>Document</title>
    </head>
    <body>
        <h1>this is h1</h1>
        <div>
            this is div
            <span>this is span</span>
        </div>
    </body>
</html>
Copy the code

What are the CSS selectors?

CSS selectors look complicated, but they’re really simple, and here are all the symbols that we use in CSS selectors

# >., * + ~ : {} () []
Copy the code

Type Selector

ID Selector

Child Selector

Descendant Selector

Combine Descendant & ID Selector

Class Selector

Combine the Class Selector

Comma Combinator Selector

Universal Selector

Combine Universal Selector

Adjacent Sibling Selector

General Sibling Selector

First Child Pseudo Selector

Only Child Pseudo Selector

Last Child Pseudo Selector

Nth Child Pseudo Selector

Nth Last Child Selector

First of Type Selector

Nth of Type Selector

Only of Type Selector

Last of Type Selector

Empty Selector

Negation Pseudo-class Selector

Attribute Selector

Attribute Value Selector

Attribute Starts Selector

Attribute Ends Selector

Attribute Wildcard Selector

Quick jump

  • Column “THE Way CSS Grows” 000- Opening
  • Column “THE Way to CSS Growth” 001-CSS basics
  • Column growing CSS 002-CSS selectors
  • Column the Way to CSS Growth 003-CSS weights and inheritance
  • Column CSS Growing up 004-CSS text manipulation
  • Column CSS Growth 005-CSS box model
  • Column CSS Growth 006- Backgrounds and gradients
  • CSS: The Way to Grow 007-CSS defines data formats
  • Column CSS Growth 008- Floating layout
  • To be continued…