CSS伪类选择器和伪元素选择器

Posted 2020-06-09

CSS的伪类选择器常用的是link/visited/hover/active，分别对应未访问、已访问过、鼠标悬停、鼠标按下时的样式，常用于链接，使用时要按此顺序依次写CSS，不能乱

1 a:link{background-color:blue;}          //未访问前深蓝色
2 a:visited{background-color:beige;}    //访问过淡黄色
3 a:hover{background-color:aqua;}      //鼠标悬停时水蓝色
4 a:active{background-color:coral;}      //鼠标按下时珊瑚黄色

伪元素选择器常用的有first-line/first-letter/before/after,分别对应第一行、第一个字母、元素前插入和元素后插入样式，可用于段落

1 p:first-line{color:aqua;}                   //段落首行文字变成水蓝色
2 p:first-letter{font-size:50px;}          //首字母字号50px
3 p:before{content:"~";}                    //段落前插入一个~字符
4 p:after{content:"!";}                        //段落后插入一个感叹号