码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2020-05-24 20:47:43      阅读:51      评论:0      收藏:0      [点我收藏+]

标签:inpu   标签   size   site   选择器   hover   :link   伪元素   :active   

伪类选择器

 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; 优先级最大

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

标签:inpu   标签   size   site   选择器   hover   :link   伪元素   :active   

原文地址:https://www.cnblogs.com/ch2020/p/12952333.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!