Common uses of CSS selectors

    <style>
        div{
            color: red;
        }
    </style>

<body>
    <div>我是类选择器</div>
    <div>style中设置了</div>
    <div>只要是div标签都要变红</div>
    <p>我不是div标签，我不红</p>
</body>

(2) Class selector

Create a class in style. As long as a tag uses this class, the tag using this class will become the style in the class.

    <style>
        .tobered{
            color: red;
        }
    </style>

<body>
    <div class="tobered">我是选择了class类的</div>
    <div>我没选择</div>
</body>

(3) id selector

It is almost the same as the class selector. The only difference is that the id selector can only be used by one tag.

    <style>
        #tobered{
            color: red;
        }
    </style>
</head>
<body>
    <div id="tobered">我是选择了id选择器的</div>
    <div>我没选择</div>
</body>

(4) Wildcard selector (special)

It is an advanced version of the tag selector. It uses * to replace all tags. It can be used in rare cases.

Because the effect will cover all tags

    <style>
        *{
            color: red;
        }
    </style>

<body>
    <div>通配符1</div>
    <div>通配符2</div>
</body>

3. Composite selector

(1) Descendant selector

Advanced tag selector, specifying the style of a small tag in a certain tag

    <style>
        div div{
//是div中的div标签为红色，是第二个div标签里的颜色是红色
//第一个div标签里的内容不变
            color: red;
        }
    </style>

<body>
    <div>
        我是父标签
        <div>
            我是子标签
        </div>
    </div>
</body>

(2) Descendant selector

An advanced version of the class selector, specifying what subtag of the class is used

    <style>
        .abc div{
            color: red;
        }
    </style>

<body>
    <div class="abc">
        我是父标签
        <div>
            我是子标签
        </div>
    </div>
</body>

(3) Union selector

Select multiple tags at the same time

    <style>
        div,p{
            color: red;
        }
    </style>

<body>
    <div>我是div标签</div>
    <p>我是p标签</p>
    <span>我是span标签</span>
</body>