伪类选择器 伪原色选择器 选择器的优先级

伪类选择器

    <style>
        a:link{      # 未访问连接
            color: green;
        }
        a:visited{   # 已访问连接
            color: yellow;
        }
        a:hover{     #鼠标悬浮颜色
            color: aqua;
        }
        a:active{    # 鼠标按下去的颜色
            color: brown;
        }
        div:hover{    # hover可以应用于其他的标签
            color: brown;
        }
    </style>

focus 标签

 input:focus{ 2 background-color: pink; 3 }    input标签获得光标显示的颜色

伪元素选择器

 div:first-letter{             第一个字母变化
            font-size: 48px;
            color: red;
        }
        div:before{            在元素前面加上内容
            content: '你好';
            color: pink;
            font-size: 48px;
        }
        div:after{
            content: 'ahahah';
            color: brown;
            font-size: 20px;
        }

选择器的优先级

    <style>
        body{      优先级1
            color: pink;
        }
        .c1{     优先级10
            color: red;
        }
        #aa{     优先级100
            color: saddlebrown;
        }
    </style>

 <p style="color: red">你好啊</p> 优先级10000    内嵌样式

 color: blue!important; 优先级最大