【CSS】【选择器】CSS选择器详解

* {
    /*
        通配符选择器：选择所有元素
    */
}

#btn {
    /*
        ID选择器：选择id='btn'的元素
    */
}

.round {
    /*
        类选择器：选择所有class='round'的元素
    */
}

p {
    /*
        元素选择器：选择所有
元素
    */
}

[title] {
    /*
        属性选择器：选择所有带有title属性的元素
    */
}

p, h1 {
    /*
        或选择器：选择所有
元素或元素
    */
}

.round.blue {
    /*
        与选择器：选择所有class='round blue'的元素
    */
}

a[href="https://www.baidu.com"] {
    /*
        与选择器，属性选择器：选择所有地址为百度的超链接
    */
}

body > div {
    /*
        子选择器：选择下的所有
元素，只包括直接子节点
    */
}

html div {
    /*
        后代选择器：选择下的所有
元素，包括间接子节点，即孙节点
    */
}

#div1 + #div2 {
    /*
        相邻选择器：选择id='div1'元素后紧跟的id='div2'元素，必须是直接相邻关系
    */
}

div1 ~ div2 {
    /*
        兄弟选择器：选择class='div1'元素后所有class='div2'的兄弟元素
    */
}

a:hover {
    /*
        伪类选择器：所有处于指针悬浮状态下的元素
    */
}