This is the fourth day of my participation in the November Gwen Challenge. Check out the details: The last Gwen Challenge 2021

All selectors in this article do not consider compatibility issues

Simple selector

Element selector

Select the specified element by tag name syntax: tag name {} example

html

    <h1 class="aaa">I am heading</h1>
    <p class="aaa">Text text text text text</p>
    <p id="bbb">Text text text text text</p>
    <p class="ccc">Text text text text text</p>
    <p class="ddd">Text text text text text</p>
    <p class="eee">Text text text text text</p>
Copy the code

css

        h1{
           color: red; 
        }
Copy the code
The id selector

Select an element based on its id attribute value. Id is unique and non-repeatable: #id{} Example

html

    <h1 class="aaa">I am heading</h1>
    <p class="aaa">Text text text text text</p>
    <p id="bbb">Text text text text text</p>
    <p class="ccc">Text text text text text</p>
    <p class="ddd">Text text text text text</p>
    <p class="eee">Text text text text text</p>
Copy the code

css

       #bbb{
           color: red; 
        }
Copy the code
The class selector

Select a set of elements based on their class attribute value, class repeatable syntax:.class{} example

html

    <h1 class="aaa">I am heading</h1>
    <p class="aaa">Text text text text text</p>
    <p id="bbb">Text text text text text</p>
    <p class="ccc">Text text text text text</p>
    <p class="ddd">Text text text text text</p>
    <p class="eee">Text text text text text</p>
Copy the code

css

       .aaa{
           color: red; 
        }
Copy the code
Wildcard * selector

Select all elements in the page syntax: *{} example

html

    <h1 class="aaa">I am heading</h1>
    <p class="aaa">Text text text text text</p>
    <p id="bbb">Text text text text text</p>
    <p class="ccc">Text text text text text</p>
    <p class="ddd">Text text text text text</p>
    <p class="eee">Text text text text text</p>
Copy the code

css

* {color: red; 
        }
Copy the code

Compound selector

Intersection selector

Select an element that meets more than one condition at the same time. If there is an element selector, the element selector beginning syntax must be used: selector 1 selector 2 selector n{} example

html

    <h1 class="aaa">I am heading</h1>
    <p class="aaa">Text text text text text</p>
    <p id="bbb">Text text text text text</p>
    <p class="ccc">Text text text text text</p>
    <p class="ddd">Text text text text text</p>
    <p class="aaa bbb ccc">Text text text text text</p>
Copy the code

css

       h1.aaa{
           color: red; 
        }
        .aaa.bbb.ccc{
            color: blue;
        }
Copy the code
Union selector (grouping selector)

Element syntax for selecting multiple selectors at the same time: selectors 1, 2, n{}

The sample

html

    <h1 class="aaa">I am heading</h1>
    <p class="aaa">Text text text text text</p>
    <p id="bbb">Text text text text text</p>
    <p class="ccc">Text text text text text</p>
    <p class="ddd">Text text text text text</p>
    <p class="aaa bbb ccc">Text text text text text</p>
Copy the code

css

        .aaa..bbb..ccc{
            color: blue;
        }
Copy the code

Relational selector

Understanding relationship selectors requires understanding who is related to whom before

Parent element: An element that directly contains child elements

Child element: An element directly contained by a parent element

Ancestor element: An element that directly or indirectly contains descendants, and an element’s parent element is also its ancestor element

Descendant element: An element that is directly or indirectly contained by an ancestor and whose children are also descendants

Sibling element: Elements that have the same parent element

Child element selector

Check the specified parent element for the specified child element syntax: Parent > child element {}

The sample

html

    <h1 class="aaa">I am heading</h1>
    <div class="aaa">
        <p>Text text text text text<span>This is the span of this article</span>
        </p>
        <span>This is the span of this article</span>
    </div>
    <p class="bbb">Text text text text text</p>
    <p class="ccc">Text text text text text</p>
    <p class="ddd">Text text text text text</p>
Copy the code

css

        .aaa > span{
            color: red;
        }
Copy the code
Descendant selector

Selects the defined descendant element of the specified element

Syntax: ancestor descendant {}

The sample

html

    <h1 class="aaa">I am heading</h1>
    <div class="aaa">
        <p>Text text text text text<span>This is the span of this article</span>
        </p>
        <span>This is the span of this article</span>
    </div>
    <p class="bbb">Text text text text text</p>
    <p class="ccc">Text text text text text</p>
    <p class="ddd">Text text text text text</p>
Copy the code

css

        .aaa  span{
            color: red;
        }
Copy the code
Sibling selector

Choose your next brother

Syntax: previous + last

The sample

html

    <h1 class="aaa">I am heading</h1>
    <div class="aaa">
        <p>Text text text text text<span>This is the span of this article</span>
        </p>
        <span>This is the span of this article</span>
    </div>
    <p class="bbb">Text text text text text</p>
    <p class="ccc">Text text text text text</p>
    <p class="ddd">Text text text text text</p>
Copy the code

css

        .aaa  + p{
            color: red;
        }
Copy the code

Select all of the brothers below

Grammar: brother ~ younger brother

The sample

html

    <h1 class="aaa">I am heading</h1>
    <div class="aaa">
        <p>Text text text text text<span>This is the span of this article</span>
        </p>
        <span>This is the span of this article</span>
    </div>
    <p class="bbb">Text text text text text</p>
    <p class="ccc">Text text text text text</p>
    <p class="ddd">Text text text text text</p>
Copy the code

css

        .aaa ~ p{
            color: red;
        }
Copy the code

Property selector

[Attribute Name] Selects the element that contains the specified attribute

The sample

html

    <p title="aaa">Text text text text text</p>
    <p title="bbb">Text text text text text</p>
    <p title="ccc">Text text text text text</p>
    <p title="ddd">Text text text text text</p>
    <p title="eee">Text text text text text</p>
Copy the code

css

        p[title]{
           color: red; 
        }
Copy the code

[Attribute name = Attribute Value] Selects the element that contains the specified attribute and attribute value

The sample

html

    <p title="aaa">Text text text text text</p>
    <p title="bbb">Text text text text text</p>
    <p title="ccc">Text text text text text</p>
    <p title="ddd">Text text text text text</p>
    <p title="eee">Text text text text text</p>
Copy the code

css

        p[title=aaa]{
           color: red; 
        }
Copy the code
[Attribute name ^= Attribute Value] Selects the element whose attribute value begins with the specified value

The sample

html

    <p title="aaa">Text text text text text</p>
    <p title="abbb">Text text text text text</p>
    <p title="ccc">Text text text text text</p>
    <p title="ddd">Text text text text text</p>
    <p title="eee">Text text text text text</p>
Copy the code

css

        p[title^=a]{
           color: red; 
        }
Copy the code
[Attribute name $= attribute value] Selects the element whose attribute value ends with the specified value

The sample

html

    <p title="aaa">Text text text text text</p>
    <p title="abbb">Text text text text text</p>
    <p title="ccca">Text text text text text</p>
    <p title="ddd">Text text text text text</p>
    <p title="eee">Text text text text text</p>
Copy the code

css

        p[title$=a]{
           color: red; 
        }
Copy the code
[Attribute name *= attribute value] Selects the element whose attribute value contains the specified element

The sample

html

    <p title="aaa">Text text text text text</p>
    <p title="abbb">Text text text text text</p>
    <p title="ccca">Text text text text text</p>
    <p title="ddd">Text text text text text</p>
    <p title="eee">Text text text text text</p>
Copy the code

css

        p[title*=a]{
           color: red; 
        }
Copy the code

Pseudo class selector

Pseudo-classes are used to describe a particular state of an element, usually beginning with:

  • :first-child The first child element

  • :last-child Specifies the last child element

  • :nth-child() Selects the NTH child

    Special values:

    N: the NTH element 2n or even element 2n+1 or oddCopy the code

These pseudo-classes are sorted by all the child elements

The sample

html

    <ul>
        <li>Text text text text text</li>
        <li>Text text text text text</li>
        <li>Text text text text text</li>
        <li>Text text text text text</li>
        <li>Text text text text text</li>
    </ul>
Copy the code

css

        ul > li:first-child{
            color: red;
        }
        ul > li:last-child{
            color: green;
        }
        ul > li:nth-child(2) {color: blue;
        }
Copy the code
  • :first-of-type The first child element of the same type
  • :last-of-type Indicates the last child element of the same type
  • :nth-of-type() Selects the NTH child of type

The sample

html

    <ul>
        <li>Text text text text text</li>
        <li>Text text text text text</li>
        <li>Text text text text text</li>
        <li>Text text text text text</li>
        <li>Text text text text text</li>
    </ul>
Copy the code

css

    ul > li:first-of-type{
            color: red;
        }
        ul > li:last-of-type{
            color: green;
        }
        ul > li:nth-of-type(2) {color: blue;
        }
Copy the code
  • :not() excludes a specified element

The sample

html

    <ul>
        <li>Text text text text text</li>
        <li>Text text text text text</li>
        <li>Text text text text text</li>
        <li>Text text text text text</li>
        <li>Text text text text text</li>
    </ul>
Copy the code

css

    ul > li:not(:nth-of-type(3)) {color: red;
    }
Copy the code

Above, this list lists some common selectors in the development process. For more comprehensive selection, you can read the CSS documentation www.apiref.com/css-zh/inde…

Finally, an interview question that is often asked, what is the weight (priority) of the selector

The conclusion:! Important > Interline Style ID selector > Class selector > Label selector > Wildcard selector > Inherited Style

Note: Intersection selectors add weights before comparing them, group selectors compare them separately

The sample

html

    <div class="aaa" id="bbb" style="color: green;">Content Content Content</div>
Copy the code

css

    div{
            color: red;
        }
        .aaa{
            color: blue;
        }
        #bbb{
            color: yellow;
        }
        div{
            color: goldenrod! important;
        }
Copy the code