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

Posted 2021-02-18 ch2020

伪类选择器

 1     <style>
 2         a:link{      # 未访问连接
 3             color: green;
 4         }
 5         a:visited{   # 已访问连接
 6             color: yellow;
 7         }
 8         a:hover{     #鼠标悬浮颜色
 9             color: aqua;
10         }
11         a:active{    # 鼠标按下去的颜色
12             color: brown;
13         }
14         div:hover{    # hover可以应用于其他的标签
15             color: brown;
16         }
17     </style>

focus 标签

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

伪元素选择器

 1  div:first-letter{             第一个字母变化
 2             font-size: 48px;
 3             color: red;
 4         }
 5         div:before{            在元素前面加上内容
 6             content: ‘你好‘;
 7             color: pink;
 8             font-size: 48px;
 9         }
10         div:after{
11             content: ‘ahahah‘;
12             color: brown;
13             font-size: 20px;
14         }

选择器的优先级

 1     <style>
 2         body{      优先级1
 3             color: pink;
 4         }
 5         .c1{     优先级10
 6             color: red;
 7         }
 8         #aa{     优先级100
 9             color: saddlebrown;
10         }
11     </style>

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

 1 color: blue!important; 优先级最大