css选择器进阶

一、后代选择器(嵌套关系)

父元素在前,子元素在后,用空格隔开

        div span {
            font-size: 60px;
            color: #f00;
        }

二、子代选择器

选择父元素的直接下一代(亲儿子)元素

父元素在前,子元素在后,用 > 连在一起

        .box>span {
            font-size: 50px;
            color: blue;
        }

三、并集选择器

多个选择器用逗号连接在一起,设置相同的样式

• 优点:减少冗余代码
• 注意:并集选择器的最后一个选择器不带逗号

        div,p,h2 {
            font-size: 24px;
            color: blue;
        }

四、交集选择器

选择器之间紧挨着,没有东西分隔

        p.box {
            font-size: 24px;
            color: pink;
        }

五、hover伪类选择器

语法:选择器:hover{css}

鼠标悬停在元素上的状态

01.超链接默认状态

        a {
            text-decoration: none;
            color: #333;
            font-size: 50px;
        }

02.超链接访问之后的状态

        a:visited {
            color: yellow;
        }

03.鼠标悬停到超链接上的状态

        a:hover {
            color: red;
        }

04.超链接激活(鼠标按住不松手)的状态

        a:active {
            color: blue;
        }