What types of selectors are available

Priority: ID selector > Class selector > tag selector

Class selectors

  • Select all labels labeled with the specified class name

  • Syntax format. Class name {}

    .demo {
    color:red;
}
 <h1 class="demo">The title</h1>
Copy the code

Label selector

  • Select a type of label
  • Syntax format:Tag name {}
    h1{
        color:red;
    }
    
    <h1>The title</h1>
Copy the code

The ID selector

  • Select the label with the specified ID
  • Syntax format:# id name {}
    #idName {
        color:red;
    }

    <h1 id="idName">The title</h1>
Copy the code

Hierarchy selector (Blend)

  • Descendant selector
    • A tag under a tag, no hierarchy (as long as it is a descendant of its own)
    • Grammar:Any offspring of the parent {}
    body p {
    color:yellow;
}

body li {
    color:red;
}

<body>
    <p>I turn yellow</p>
    <h1>
        <p>I turn yellow</p>
        
        <span>
            <p>I turn yellow</p>
        </span>
    </h1>

    <ul>
        <li>I'll turn red</li>
        <li>I'll turn red</li>
        <li>I'll turn red</li>
    </ul>
</body>

Copy the code

  • Child selectors
    • Children of a tag, restricted to the next level of its own (only its own son)
    • Grammar:Parent child {}
    body >p{
        color:red;
    }
    
    <body>
        <p>I'll turn red</p>
        <h1 class="class01">
            <p>I won't turn red</p>
            <span>
                <p>I won't turn red</p>
            </span>
            <p>I won't turn red</p>
        </h1>
    </body>
Copy the code

  • Adjacent sibling selectors
    • With the same sibling tag, select a neighboring sibling node down (find a sibling of your sibling).
     .class002 + p{
        color:red;
    }
    
    <body>
         <p>I won't turn red</p>
        <p class="class002">I won't turn red</p>
        <p>I'll turn red</p>
        <p>I won't turn red</p>
        <p>I won't turn red</p>
    </body>

Copy the code

  • Universal selector
    • Select all adjacent nodes of the same class (find all brothers of the same class)
     .class003 ~ p{
        color:red;
    }
    
    <body>
         <p>I won't turn red</p>
        <p class="class003">I won't turn red</p>
        <p>I'll turn red</p>
        <p>I'll turn red</p>
        <p>I'll turn red</p>
    </body>
Copy the code