This is the sixth day of my participation in Gwen Challenge

The class of the selector

Simple selector

Matches elements by element type, element class, and element ID.

1. Type selector (element selector)

The type selector simply selects an HTML element name (case insensitive).

<style>
  div{
      background-color: #1e7e34;
      height: 200px;
  }
</style>
Copy the code

In the code above, the type selector is used to select all elements with the tag div and change the background color and height of those elements.

Class selector

As the name implies, a class selector is the name of the class that selects the element, class, and a class selector requires a dot. Plus the class name.

.box{
  background-color: #7b1e7e;
}
Copy the code

3. ID selector

The ID selector consists of a # symbol and an ID name. The class can be repeated, but the ID is unique.

#boxId{
  background-color: #1e7e54;
}
Copy the code

4. Universal selector

The universal selector, the symbol *, selects all the elements on the page. For example, we may want to remove the entire border during development, so we can use it.

*{
  margin: 0;
  padding: 0;
}
Copy the code

Second, the property selector

Matches elements by attribute, attribute value. The generic syntax consists of [], which contains the attribute name, and the attribute value.

Existence and value property selectors

[class] {/ * * /} [attribute name] [class = one] {/ * * /} [attribute name = attribute value] [class ~ = three] {/ *] [attribute name ~ = attribute value * /}Copy the code

Substring value property selector

[class | = one] {/ * [] attribute name | = attribute value: select the attribute value element or attribute value at the beginning of * /} [class ^ = one] {/ *] [^ = attribute name attribute value: $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$Copy the code

Third, pseudo class

Matches the element that determines the state. That is, only in certain states can the corresponding style be rendered, other states are another style.

We use :active: Checked :disabled :hover :first-child :last-child :visited

Any :default :dir() :empty :enabled :first :first-of-type :fullscreen :focus :indeterminate :in-range :invalid :lang() :last-of-type :left :link :not() :nth-child() :nth-last-child() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :read-only :read-write :required :right :root :scope :target :visited

4. Pseudo-elements

Matches the elements in the relevant specified position. Similar to pseudo-classes, except that in CSS3 pseudo-elements are denoted by two colons (::)

A pseudo-element is an element created outside the DOM tree (the pseudo-class operates on elements that are already in the DOM tree)

::after ::before ::first-letter ::first-line ::selection ::backdrop

However, due to compatibility issues, most of the colon is still used uniformly.

5. Combinator

Matches combine two or more selectors.

In CSS, we can not only use a single selector, but also combine multiple selectors together to make development easier.

<div class="container">
    <h6>h6</h6>
    <div class="one">1</div>
    <div class="two">2</div>
    <h1>h1</h1>
    <div class="three">
        <div class="three_one">3.0</div>
        <div class="three_two">3.1</div>
        <div class="three_three">
            <div class="three_three_one">3.2.1</div>
        </div>
    </div>
</div>
Copy the code
  • Descendant selector (A B) : Selects the A element and the descendants nested within the A element. B may not be A direct descendant, such as the last two layers of A.
.three .three_three_one{
    background-color: #1e7e34;
}
Copy the code
  • Child selector (A > B) : Selects elements A and the immediate children of elements A, that is, elements B are the next layer of A.
.three > div{
    background-color: #1e7e34;
}
Copy the code
  • Adjacent sibling selector (A + B) : Selects elements A and their immediate siblings, that is, elements B are next to elements A and on the same level.
h6 +  div{
    background-color: #1e7e34;
}
Copy the code
  • Universal sibling selectors (A ~ B) : Select elements A and their siblings (not necessarily next to each other) on the same level.
h6 ~  h1{
    background-color: #1e7e34;
}
Copy the code

Six, multi-use selector

Instead of individual selectors, match all elements selected by these selectors.

Reference article: W3C CSS selector Reference Manual